-
Notifications
You must be signed in to change notification settings - Fork 30
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
using same query in multiple files #95
Comments
You should be able to just use the same query key and fetcher function. If the data is still cached, it will return the results that were previously cached with that key. To avoid background re-fetches, update your cacheTime and staleTime defaults. Caching Info: https://sveltequery.vercel.app/guides/caching const queryResult = useQuery(queryKey, queryFn?, {
cacheTime: 15 * 60 * 1000, // 15 minutes
staleTime: 10 * 60 * 1000 // 10 minutes
}) The difference between cache time and stale time is this:
|
I can only seem to access it on the same page. const getMyPostsRequest = useQuery(
'getMyPosts',
async () => {
const myPosts = await api('GET', 'profile/myPosts', null, {
currentSession: $session
});
return myPosts?.data;
},
{ staleTime: Infinity }
); i can access this data in the same component using |
Here's how I do it @Nisthar . // $lib/queries.ts
export const useWatchlistItems = () => {
return useQuery(
['watchlist', 'menuList'],
async () => {
const { data, error } = await getWatchlist({ orderByPrimaryKey: true });
if (error) throw error;
return data;
},
{
refetchOnWindowFocus: false
}
);
}; <script lang="ts">
// some-page.svelte
import { useWatchlistItems } from '$lib/queries;
$: queryRes = useWatchlistItems();
// Do whatever..
</script>
{#if $queryRes.isLoading}
<span>Loading...</span>
{:else if $queryRes.isError}
<span>Error: {$queryRes.error.message}</span>
{:else if $queryRes.data}
<div>{JSON.stringify($queryRes.data)}</div>
{/if} <script lang="ts">
// some-componen.svelte
import { useWatchlistItems } from '$lib/queries;
$: queryRes = useWatchlistItems();
// Do whatever..
</script>
{#if $queryRes.isLoading}
<span>Loading...</span>
{:else if $queryRes.isError}
<span>Error: {$queryRes.error.message}</span>
{:else if $queryRes.data}
<div>{JSON.stringify($queryRes.data)}</div>
{/if} |
I have two components: UserHome.svelte and UserProfile.svelte.
I want to query users posts when the user navigates to UserHome.svelte. But i want the data to be stored in cache and when the user navigates to UserProfile.svelte it should have access to the cached data. How can i do this?
The text was updated successfully, but these errors were encountered: