GraphQL Codegen - Apollo React Suspense

This is a plugin for graphl codegen, it is designed for use with apollo along with React Suspense.

What is this?

This creates a data repository for each query and mutation in your application (subscriptions are not supported yet).
By using these repositories you can use suspense with apollo or migrate your app to use suspense.

Install

yarn add -D codegen-apollo-suspense

Setup

Follow the official setup guide if your are not already using codegen. Then update your config to use this package.

schema: https://graphql-weather-api.herokuapp.com
overwrite: true
documents: src/**/*.graphql
generates:
  src/generated/schema.tsx:
    - "typescript"
    - "typescript-operations"
-   - typescript-react-apollo
+   - codegen-apollo-suspense

In the setup example we have this query.

query GetWeather($city: String!, $country: String!) {
  getCityByName(name: $city, country: $country, config: {
    units: metric,
    lang: en,
  }) {
    id
    name
    country
    weather {
      summary {
        title
        description
        icon
      }
      temperature {
        actual
        feelsLike
      }
      wind {
        speed
      }
      clouds {
        all
        visibility
        humidity
      }
      timestamp
    }
  }
}

Suspense can now be used in the application.

Here is sn example with hooks.

import React from 'react';
import { useGetWeatherQuery } from '../generated/schema';

const Temperature: React.FC = () => {
    const { data, loading, error } = useGetWeatherQuery({
        variables: {
            country: 'au',
            city: 'melbourne',
        }
    });

    if (loading) return <div>Loading</div>;
    if (error) throw new Error(error.message);

    return <div>{ data.getCityByName?.weather?.temperature?.actual }</div>);
}

const Widget: React.FC = () => (
    <ErrorBoundary fallback={ErrorPanel}>
        <Temperature />
    </ErrorBoundary>
)

note: the throw is to just make the examples more comparable

Now with suspense.

import React, { Suspense } from 'react';
import { useGetWeatherSuspenseQuery } from '../generated/schema';

const Temperature: React.FC = () => {
    const data = useGetWeatherSuspenseQuery({
        variables: {
            country: 'au',
            city: 'melbourne',
        }
    });

    return <div>{ data.getCityByName?.weather?.temperature?.actual }</div>);
}

const Widget: React.FC = () => (
    <ErrorBoundary fallback={ErrorPanel}>
        <Suspense fallback={<div>Loading</div>}>
            <Temperature />
        </Suspense>
    </ErrorBoundary>
)

Using with the React Apollo plugin

To ensure that duplicate documents are not created please add

schema: https://graphql-weather-api.herokuapp.com
overwrite: true
documents: src/**/*.graphql
generates:
  src/generated/schema.tsx:
    - "typescript"
    - "typescript-operations"
+   - typescript-react-apollo
   - codegen-apollo-suspense
+ config:
+  useExternalDocument: true