Logo

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>
This site is an XMLUI™ app.