サンプルコード
GraphQLの操作情報は以下のように定義しておきます。指定したい情報を定義します。（下の例で言えばname)
|
1 2 3 4 5 6 7 |
const GET_XXX = gql` { xxx(first: 3) { name } } `; |
カスタムフックとして以下のhooksを定義します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { request } from 'graphql-request' import { useQuery } from 'react-query' import { GET_XXX } from '../queries/queries' export const fetchXXX = async () => { const { rockets: data } = await request<フェッチするデータのデータ型<span class="crayon-sy">[</span><span class="crayon-sy">]</span>>( 'GraphQLのGETエンドポイント', GET_XXX ) return data } export const useQueryXXX = () => { return useQuery<フェッチするデータのデータ型<span class="crayon-sy">[</span><span class="crayon-sy">]</span>, Error>({ queryKey: 'rockets', queryFn: fetchXXX, staleTime: 10, refetchOnWindowFocus: false, //refetchInterval: 3000, }) } |
request
REST APIで言うところのAxiosになります。GraphQLの場合はrequestを使います。
第一引数でGraphQLのエンドポイント、第二引数でqueryのオブジェクトを指定します。
Apollo Clientとの比較
GraphQLで一番有名なライブライトしてはApollo Clientがあるかと思いますが、Apollo ClientはGraphQL専用ライブラリになります。
今回使用している「graphql-request」はGraphQL以外のデータフェッチにも対応しているのでより汎用性が高いライブラリと言っても良いです。
動作
- REST APIで使用したような「getQueryData」を同じように使用してcacheにアクセスできます。
- 最初のページをロードした時に1度だけgraphQLサーバーにフェッチを行います。
- cacheから取得する場合はgraphQLサーバーに問い合わせは行わないです。
この記事へのコメントはありません。