Bezançon demonstrates an Expo and TypeScript app using React Query with graphql-request, GraphQL Code Generator, and a Hasura API backed by Postgres and hosted with Nhost. Its stale-while-revalidate behavior shows cached movie data immediately while fresh data loads in the background.
React Query with GraphQL code gen and Typescript
Speaker
Arnaud Bezançon, an entrepreneur and CTO, presents a React Native data-fetching approach using React Query, GraphQL Code Generator, and TypeScript at React Native EU 2021 with Callstack.
GraphQL Code Generator uses a schema endpoint, query files, and plugins to produce TypeScript types and React Query hooks. Bezançon recommends regenerating the output when the schema or operations change, then wrapping generated hooks in custom hooks to keep component code focused.
The demo uses initial data from a movie list to show title and rating while fetching fuller details. Bezançon also covers refresh on app focus, reconnecting after offline periods, screen focus, and polling; polling can be set per query or globally, with care for energy use.
For rating changes, the app updates the UI optimistically, saves previous data for rollback, and invalidates the movie list after success. Infinite lists use React Query's useInfiniteQuery with FlatList pagination, while cache persistence in AsyncStorage is demonstrated through experimental React Query features and an app-version cache purge.
Bezançon contrasts universal query caching tools such as React Query with GraphQL state frameworks such as Relay, Apollo Client, and urql, describing tradeoffs in flexibility, schema rules, and cache behavior. His recommendations include starting with code generation, using custom hooks and a single source of truth, testing under poor network conditions, and monitoring queries.
Takeaways
- Generate GraphQL types and React Query hooks from the schema and operation files to reduce manual upkeep.
- Use initial data to show list information immediately while fetching richer screen details.
- For optimistic mutations, save prior data so errors can roll the UI back, then invalidate affected queries after success.
- Test loading, errors, and optimistic updates under slow or unreliable network conditions.
- Choose between general query caching and GraphQL state frameworks based on team needs and desired schema constraints.
Mentioned in this talk
Search inside this talk
What was claimed 13
- builtTanner Linsley built TanStack Query
“The library was created by Tanner Linsley.”
YouTube Verified2 sources· Talk
- built
“This CLI was created by The Guild.”
YouTube Unverified1 source· Talk
- uses
“everything will be hosted with Nhost.”
YouTube Unverified1 source· Talk
- uses
“For the API, we'll use Hasura with a Postgres database.”
YouTube Unverified1 source· Talk
- uses
“React Query with graphql-request.”
YouTube Unverified1 source· Talk
- featureTanStack Query: Stale-while-revalidate caching
“an instant response from the cache, while the data is refetched from the server in the background.”
YouTube Unverified1 source· Talk
- uses
“generate hooks with React Query, using graphql-request as the fetcher.”
YouTube Unverified1 source· Talk
- featureTanStack Query: Refetching active queries when the app returns to the foreground
“React Query automatically refetches all active queries.”
YouTube Unverified1 source· Talk
- integrates withTanStack Query integrates with React Native
“In a React Native application, you have to use this hook, which uses AppState.”
YouTube Unverified1 source· Talk
- featureTanStack Query: Optimistic updates and cache invalidation
“use optimistic updates, with a query client from React Query and the setQueryData function.”
YouTube Unverified1 source· Talk
- integrates withTanStack Query integrates with Suspense
“React Query supports both React Suspense and error boundaries.”
YouTube Unverified1 source· Talk
- featureTanStack Query: Infinite query pagination
“we use React Query's useInfiniteQuery function.”
YouTube Unverified1 source· Talk
- featureTanStack Query: Cache persistence with AsyncStorage
“persist all the cache data in AsyncStorage.”
YouTube Unverified1 source· Talk
