Control cache invalidation
By default, when an
APICall executes successfully, it invalidates ALL DataSource caches, causing them to refetch. Use the invalidates property to control this behavior for better performance.<App>
<DataSource
id="users"
url="/api/users"
/>
<DataSource
id="stats"
url="/api/stats"
/>
<APICall
id="updateUser"
method="put"
url="/api/users/{$param}"
invalidates="{['/api/users']}"
completedNotificationMessage="User updated!"
/>
<VStack>
<Text>Users (will refresh)</Text>
<Items data="{users}">
<Card>
<HStack>
<VStack>
<Text>{$item.name}</Text>
<Text>Role: {$item.role}</Text>
</VStack>
<Button
onClick="updateUser.execute($item.id)"
enabled="{$item.role !== 'admin'}">
Promote to Admin
</Button>
</HStack>
</Card>
</Items>
<Text>Stats (won't refresh)</Text>
<Text>Total requests: {stats.value.totalRequests}</Text>
<Text>Stats fetched: {stats.value.lastUpdate} time(s)</Text>
</VStack>
</App>Update user - refreshes user list
<App>
<DataSource
id="users"
url="/api/users"
/>
<DataSource
id="stats"
url="/api/stats"
/>
<APICall
id="updateUser"
method="put"
url="/api/users/{$param}"
invalidates="{['/api/users']}"
completedNotificationMessage="User updated!"
/>
<VStack>
<Text>Users (will refresh)</Text>
<Items data="{users}">
<Card>
<HStack>
<VStack>
<Text>{$item.name}</Text>
<Text>Role: {$item.role}</Text>
</VStack>
<Button
onClick="updateUser.execute($item.id)"
enabled="{$item.role !== 'admin'}">
Promote to Admin
</Button>
</HStack>
</Card>
</Items>
<Text>Stats (won't refresh)</Text>
<Text>Total requests: {stats.value.totalRequests}</Text>
<Text>Stats fetched: {stats.value.lastUpdate} time(s)</Text>
</VStack>
</App>When an API mutation doesn't affect other displayed data, use
invalidates="{[]}" to prevent unnecessary refetches.