Integrates TanStack React Query with Quilt by automatically running your queries during server-side rendering.
Quilt provides integrations for two popular React querying libraries:
react-query
(this library) andswr
. Which should you use? We recommend usingswr
until you find limitations that are solved byreact-query
. The reason is simple:swr
is ~4Kb compressed, whilereact-query
is ~13Kb compressed.react-query
provides a detailed comparison of these libraries if you are interested in learning about more advanced featuresreact-query
supports with those extra bytes.
Install both @quilted/react-query
and @tanstack/react-query
as dependencies of your project:
$ pnpm add @quilted/react-query @tanstack/react-query --save
Note: This library needs
@quilted/quilt
installed in your local repository. If you have just created a new Quilt app, you already have this installed.
React Query’s getting started instructions instruct you to create a QueryClient
object, and pass it to a QueryClientProvider
component. To integrate React Query with Quilt, you will pass your QueryClient
object to this library’s ReactQueryContext
component instead:
import {useMemo} from 'preact/hooks';
import {QueryClient} from '@tanstack/react-query';
import {ReactQueryContext} from '@quilted/react-query';
export default function App() {
const client = useMemo(() => new QueryClient(), []);
return (
<ReactQueryContext client={client}>
<Example />
</ReactQueryContext>
);
}
The ReactQueryContext
takes care of ensuring that all queries made by your application are run during server-side rendering. It serializes the results into your HTML payload, and “hydrating” the query client so that data is available when your application starts in the user’s browser. It also renders the QueryClientProvider
for you, so you don’t need to do it yourself.
That’s all the setup you need! Elsewhere in your application, you can now use React Query’s useSuspenseQuery
hook to load data in your components. The example below shows how you might use Quilt’s GraphQL utilities to perform type-safe GraphQL queries using React Query:
import {createGraphQLHttpFetch} from '@quilted/quilt';
import {useSuspenseQuery} from '@tanstack/react-query';
import startQuery from './Start.graphql';
const query = createGraphQLHttpFetch({uri: 'https://my-graphql-api.com'});
export function Start() {
const result = useSuspenseQuery('start-query', () => query(startQuery));
return <pre>{JSON.stringify(result, null, 2)}</pre>;
}