Auf dieser Seite
GraphQL
Da die Fetching-Mechanismen von React Query agnostisch auf Promises basieren, kannst du React Query mit praktisch jedem asynchronen Daten-Fetching-Client verwenden, einschließlich GraphQL!
Beachte, dass React Query keinen normalisierten Cache unterstützt. Während die überwiegende Mehrheit der Benutzer tatsächlich keinen normalisierten Cache benötigt oder sogar so stark davon profitiert, wie sie glauben, kann es sehr seltene Umstände geben, die ihn rechtfertigen. Stelle also sicher, dass du zuerst mit uns sprichst, um sicherzustellen, dass es wirklich etwas ist, das du brauchst!
Typsicherheit und Code-Generierung
React Query, in Kombination mit graphql-request^5 und GraphQL Code Generator, bietet voll-typisierte GraphQL-Operationen
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 },
),
})
// ...
}
Ein vollständiges Beispiel findest du im Repo
Beginne mit dem dedizierten Leitfaden in der Dokumentation von GraphQL Code Generator.
