Because React Query's fetching mechanisms are agnostically built on Promises, you can use React Query with literally any asynchronous data fetching client, including GraphQL!
Keep in mind that React Query does not support normalized caching. While a vast majority of users do not actually need a normalized cache or even benefit from it as much as they believe they do, there may be very rare circumstances that may warrant it so be sure to check with us first to make sure it's truly something you need!
React Query, used in combination with graphql-request^5 and GraphQL Code Generator provides full-typed GraphQL operations:
import request from 'graphql-request'
import { useQuery } from '@tanstack/react-query'
import { graphql } from './gql/gql'
const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ `
query allFilmsWithVariablesQuery($first: Int!) {
allFilms(first: $first) {
edges {
node {
id
title
}
}
}
}
`)
function App() {
// `data` is fully typed!
const { data } = useQuery({
queryKey: ['films'],
queryFn: async () =>
request(
'https://swapi-graphql.netlify.app/.netlify/functions/index',
allFilmsWithVariablesQueryDocument,
// variables are type-checked too!
{ first: 10 },
),
})
// ...
}
import request from 'graphql-request'
import { useQuery } from '@tanstack/react-query'
import { graphql } from './gql/gql'
const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ `
query allFilmsWithVariablesQuery($first: Int!) {
allFilms(first: $first) {
edges {
node {
id
title
}
}
}
}
`)
function App() {
// `data` is fully typed!
const { data } = useQuery({
queryKey: ['films'],
queryFn: async () =>
request(
'https://swapi-graphql.netlify.app/.netlify/functions/index',
allFilmsWithVariablesQueryDocument,
// variables are type-checked too!
{ first: 10 },
),
})
// ...
}
You can find a complete example in the repo
Get started with the dedicated guide on GraphQL Code Generator documentation.