Template for triggering network and data states in fixtures that consume Apollo Client

ApolloFixturesTemplate.tsx

import { ApolloProvider } from '@apollo/react-hooks';
import { ApolloClient, RequestHandler, InMemoryCache, ApolloLink, Observable } from 'apollo-boost';
import { GraphQLError } from 'graphql';
import React from 'react';
import { Users } from './Users';

export default {
  title: 'Pages/Users',
};

const createMockClient = (handler: RequestHandler) =>
  new ApolloClient({
    cache: new InMemoryCache({ addTypename: false }),
    link: new ApolloLink(handler),
  });

export const Fetching = () => (
  <ApolloProvider
    client={createMockClient(() => {
      return new Observable(() => {
        return;
      });
    })}
  >
    <Users data-snapshot />
  </ApolloProvider>
);

export const Empty = () => (
  <ApolloProvider
    client={createMockClient((operation) => {
      return new Observable((observer) => {
        if (operation.operationName === 'GeUsers') {
          return observer.next({
            data: {
              users: [],
            },
          });
        }
      });
    })}
  >
    <Users data-snapshot />
  </ApolloProvider>
);

export const Error = () => (
  <ApolloProvider
    client={createMockClient((operation) => {
      return new Observable((observer) => {
        if (operation.operationName === 'GetUsers') {
          return observer.next({
            errors: [new GraphQLError('Error')],
          });
        }
      });
    })}
  >
    <Users data-snapshot />
  </ApolloProvider>
);

export const Response = () => (
  <ApolloProvider
    client={createMockClient((operation) => {
      return new Observable((observer) => {
        if (operation.operationName === 'GetUsers') {
          return observer.next({
            data: {
              users: [
                {
                  id: 1,
                },
                {
                  id: 2,
                },
              ],
            },
          });
        }
      });
    })}
  >
    <Users data-snapshot />
  </ApolloProvider>
);

export const Updating = () => (
  <ApolloProvider
    client={createMockClient((operation) => {
      console.log(operation);
      return new Observable((observer) => {
        if (operation.operationName === 'GetUsers') {
          let users: any[] = [];

          setInterval(() => {
            users = [
              { id: users.length },
              ...users,
            ];
            observer.next({
              data: {
                users,
              },
            });
          }, 1000);
        }
      });
    })}
  >
    <Users />
  </ApolloProvider>
);