Default Query Function

If you find yourself wishing for whatever reason that you could just share the same query function for your entire app and just use query keys to identify what it should fetch, you can do that by providing a default query function to Svelte Query:

1 <script>
2   import { QueryClientProvider } from '@sveltestack/svelte-query';
3   // Define a default query function that will receive the query key
4   const defaultQueryFn = async ({ queryKey }) => {
5     const { data } = await axios.get(`https://jsonplaceholder.typicode.com${queryKey[0]}`)
6     return data
7   }
8 
9   // provide the default query function to your app with defaultOptions
10   const queryClient = new QueryClient({
11     defaultOptions: {
12       queries: {
13         queryFn: defaultQueryFn,
14       },
15     },
16   })
17 </script>
18 
19 <QueryClientProvider client={queryClient}>
20   <YourApp />
21 </QueryClientProvider>

1 <script>
2   // All you have to do now is pass a key!
3   const queryResult= useQuery('/posts')
4   // ...
5 
6   // You can even leave out the queryFn and just go straight into options
7   export let postId
8   const queryResult = useQuery(`/posts/${postId}`, {
9     enabled: !!postId,
10   })
11   // ...
12 </script>

If you ever want to override the default queryFn, you can just provide your own like you normally would.