Chain a DataSource refetch from an APICall.execute
APICall.execute
returns a Promise, you can call .then
to do something else.<Component name="SocialButton">
<Button
borderRadius="50%"
icon="{$props.icon}"
variant="outlined"
themeColor="{$props.themeColor || 'secondary'}"
size="xs"
onClick="{emitEvent('click')}" />
</Component>
<App>
<APICall
id="favoritePost"
method="post"
url="/api/posts/{$param}/favorite" />
<APICall
id="unfavoritePost"
method="post"
url="/api/posts/{$param}/unfavorite" />
<DataSource
id="timelineData"
url="/api/timeline"
method="GET" />
<VStack gap="$space-4" padding="$space-4">
<Text variant="h3">Social Media Timeline</Text>
<Items data="{timelineData}">
<Card padding="$space-3" marginBottom="$space-2">
<VStack gap="$space-2">
<Text variant="h6">{$item.author}</Text>
<Text>{$item.content}</Text>
<HStack gap="$space-4" verticalAlignment="center">
<HStack gap="$space-1" verticalAlignment="center">
<SocialButton icon="reply" />
<Text variant="caption">{$item.replies_count}</Text>
</HStack>
<HStack gap="$space-1" verticalAlignment="center">
<SocialButton icon="trending-up" />
<Text variant="caption">{$item.reblogs_count}</Text>
</HStack>
<HStack gap="$space-1" verticalAlignment="center">
<SocialButton
icon="like"
themeColor="{$item.favourited ? 'attention' : 'secondary'}">
<event name="click">
if ($item.favourited) {
// execute returns a Promise
unfavoritePost.execute($item.id).then(() => timelineData.refetch());
} else {
favoritePost.execute($item.id).then(() => timelineData.refetch());
}
</event>
</SocialButton>
<Text variant="caption">{$item.favourites_count}</Text>
</HStack>
</HStack>
</VStack>
</Card>
</Items>
</VStack>
</App>
Click the Like button
<Component name="SocialButton">
<Button
borderRadius="50%"
icon="{$props.icon}"
variant="outlined"
themeColor="{$props.themeColor || 'secondary'}"
size="xs"
onClick="{emitEvent('click')}" />
</Component>
<App>
<APICall
id="favoritePost"
method="post"
url="/api/posts/{$param}/favorite" />
<APICall
id="unfavoritePost"
method="post"
url="/api/posts/{$param}/unfavorite" />
<DataSource
id="timelineData"
url="/api/timeline"
method="GET" />
<VStack gap="$space-4" padding="$space-4">
<Text variant="h3">Social Media Timeline</Text>
<Items data="{timelineData}">
<Card padding="$space-3" marginBottom="$space-2">
<VStack gap="$space-2">
<Text variant="h6">{$item.author}</Text>
<Text>{$item.content}</Text>
<HStack gap="$space-4" verticalAlignment="center">
<HStack gap="$space-1" verticalAlignment="center">
<SocialButton icon="reply" />
<Text variant="caption">{$item.replies_count}</Text>
</HStack>
<HStack gap="$space-1" verticalAlignment="center">
<SocialButton icon="trending-up" />
<Text variant="caption">{$item.reblogs_count}</Text>
</HStack>
<HStack gap="$space-1" verticalAlignment="center">
<SocialButton
icon="like"
themeColor="{$item.favourited ? 'attention' : 'secondary'}">
<event name="click">
if ($item.favourited) {
// execute returns a Promise
unfavoritePost.execute($item.id).then(() => timelineData.refetch());
} else {
favoritePost.execute($item.id).then(() => timelineData.refetch());
}
</event>
</SocialButton>
<Text variant="caption">{$item.favourites_count}</Text>
</HStack>
</HStack>
</VStack>
</Card>
</Items>
</VStack>
</App>