graphql-codegen-typescript-urql-suspense

graphql-codegen-typescript-urql-suspense

GraphQL Code Generator plugin to generate React hooks for usage with Urql, Suspense and Error Boundaries.
⚠️ Highly experimental: subject to changes until v1.0.0 is available.

Installation

$ npm i -D graphql-codegen-typescript-urql-suspense
# --- or ---
$ yarn add -D graphql-codegen-typescript-urql-suspense

📘 Usage

1. First, setup the GraphQL Code Generator plugin:

# codegen.yml

generates:
  path/to/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-urql-suspense" # replaces "typescript-urql"
    config:
      # The config is similar as typescript-urql, without `withComponent` and `withHooks`
      # see: https://www.graphql-code-generator.com/plugins/typescript/typescript-urql
      # …

1. Then create an Urql client with suspense enabled:

const client = createClient({
  url: "/graphql",
  suspense: true,
  exchanges: [
    // …
  ],
});

1. Wrap your App with the Urql Provider, Suspense and an Error Boundary:

import * as React from "react";
import { ErrorBoundary } from "react-error-boundary";
import { Provider } from "urql";

export const App = () => (
  <Provider value={client}>
    <ErrorBoundary FallbackComponent={ErrorView}>
      <React.Suspense fallback={<LoadingView />}>{/* … */}</React.Suspense>
    </ErrorBoundary>
  </Provider>
);

1. Use hooks!

// Suspense queries:
// - The fetching state is delegated to the closest React.Suspense
// - The error state to the closest Error Boundary
const {
  data: { project }, // data cannot be undefined here, fetching doesn't exists
} = useSuspenseProjectPageQuery({
  variables: { projectId: "foo" },
  // Note that the "pause" param is not handled for now
});

// But also more basic queries:
// - The error state to the closest Error Boundary
const {
  data: { currentUser },
  fetching, // initial fetching
  fetchingMore, // fetching more (ex: for pagination)
} = useHomePageQuery({
  variables: { page },
  // Note that the "pause" param is not handled for now
});