@apollo/client でも suspense したい！
React18 がでたし、loading, data という関係ともおさらばしたい。でも @apollo/client は suspense に対応してない.....
ちょっと困ったので作りました。
以前作成したライブラリと @apollo/client を併用しています。
ApolloClient.watchQuery からデータを取得しているので refetchQueries や useQuery(gql).refetch() とも連携できてるはずです。
suspense された useQuery を体験する
前準備
yarn add @naporin0624/react-flowder rxjs yarn add graphql @apollo/client
query は長いので畳んでおきます。
import { gql, TypedDocumentNode } from "@apollo/client"; const USER_FIELDS = gql` fragment CoreUserFields on User { login name websiteUrl avatarUrl } `; const sampleQuery: SampleQuery = gql` ${USER_FIELDS} query SampleQuery { search(query: "repo:apollographql/apollo is:issue", type: ISSUE, first: 5) { issueCount nodes { ... on Issue { id number title createdAt } } } user(login: "naporin0624") { ...CoreUserFields } } `;
App.tsx
import React, { useMemo } from "react"; import { useSyncQuery, useApolloReset, } from "@naporin0624/react-flowder/apollo"; const App = () => { const data = useSyncQuery( sampleQuery, useMemo(() => ({ pollInterval: 10000, variables: {} }), []) ); const reset = useApolloReset(); return ( <div> <button onClick={reset}>reset</button> <p style={{ whiteSpace: "pre-wrap" }}>{JSON.stringify(data, null, 2)}</p> </div> ); }; export default memo(App)
index.tsx
import React, { Suspense } from "react"; import { createRoot } from "react-dom/client"; import App from "./App"; import { Provider as DatasourceProvider } from "@naporin0624/react-flowder"; import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client"; const token = import.meta.env.VITE_GITHUB_TOKEN; const client = new ApolloClient({ uri: "https://api.github.com/graphql", headers: { authorization: `Bearer ${token}` }, cache: new InMemoryCache(), }); createRoot(document.getElementById("root")!).render( <React.StrictMode> <ApolloProvider client={client}> <DatasourceProvider> <Suspense fallback={null}> <App /> </Suspense> </DatasourceProvider> </ApolloProvider> </React.StrictMode> );
