useSuspenseQuery.test.tsx

import React, { Fragment, StrictMode, Suspense } from 'react';
import {
  act,
  screen,
  render,
  renderHook,
  waitFor,
  RenderHookOptions,
  RenderHookResult,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ErrorBoundary } from 'react-error-boundary';
import { GraphQLError } from 'graphql';
import { InvariantError } from 'ts-invariant';
import { equal } from '@wry/equality';

import {
  gql,
  ApolloCache,
  ApolloClient,
  ApolloError,
  ApolloLink,
  DocumentNode,
  InMemoryCache,
  Observable,
  OperationVariables,
  SubscribeToMoreOptions,
  TypedDocumentNode,
  split,
  NetworkStatus,
} from '../../../core';
import {
  compact,
  concatPagination,
  getMainDefinition,
} from '../../../utilities';
import {
  MockedProvider,
  MockedResponse,
  MockSubscriptionLink,
  MockLink,
} from '../../../testing';
import { ApolloProvider } from '../../context';
import { SuspenseCache } from '../../cache';
import { SuspenseQueryHookFetchPolicy } from '../../../react';
import { useSuspenseQuery_experimental as useSuspenseQuery } from '../useSuspenseQuery';

type RenderSuspenseHookOptions<Props, TSerializedCache = {}> = Omit<
  RenderHookOptions<Props>,
  'wrapper'
> & {
  client?: ApolloClient<TSerializedCache>;
  link?: ApolloLink;
  cache?: ApolloCache<TSerializedCache>;
  mocks?: MockedResponse[];
  suspenseCache?: SuspenseCache;
  strictMode?: boolean;
};

interface Renders<Result> {
  errors: Error[];
  errorCount: number;
  suspenseCount: number;
  count: number;
  frames: Result[];
}

interface SimpleQueryData {
  greeting: string;
}

function renderSuspenseHook<Result, Props>(
  render: (initialProps: Props) => Result,
  options: RenderSuspenseHookOptions<Props> = Object.create(null)
) {
  function SuspenseFallback() {
    renders.suspenseCount++;

    return <div>loading</div>;
  }

  const renders: Renders<Result> = {
    errors: [],
    errorCount: 0,
    suspenseCount: 0,
    count: 0,
    frames: [],
  };

  const {
    mocks = [],
    suspenseCache = new SuspenseCache(),
    strictMode,
    ...renderHookOptions
  } = options;

  const client =
    options.client ||
    new ApolloClient({
      cache: options.cache || new InMemoryCache(),
      link: options.link || new MockLink(mocks),
    });

  const view = renderHook(
    (props) => {
      renders.count++;

      const view = render(props);

      renders.frames.push(view);

      return view;
    },
    {
      ...renderHookOptions,
      wrapper: ({ children }) => {
        const Wrapper = strictMode ? StrictMode : Fragment;

        return (
          <Wrapper>
            <Suspense fallback={<SuspenseFallback />}>
              <ErrorBoundary
                fallback={<div>Error</div>}
                onError={(error) => {
                  renders.errorCount++;
                  renders.errors.push(error);
                }}
              >
                <ApolloProvider client={client} suspenseCache={suspenseCache}>
                  {children}
                </ApolloProvider>
              </ErrorBoundary>
            </Suspense>
          </Wrapper>
        );
      },
    }
  );

  return { ...view, renders };
}

function useSimpleQueryCase() {
  const query: TypedDocumentNode<SimpleQueryData> = gql`
    query UserQuery {
      greeting
    }
  `;

  const mocks = [
    {
      request: { query },
      result: { data: { greeting: 'Hello' } },
    },
  ];

  return { query, mocks };
}

function usePaginatedCase() {
  interface QueryData {
    letters: {
      name: string;
      position: string;
    }[];
  }

  interface Variables {
    limit?: number;
    offset?: number;
  }

  const query: TypedDocumentNode<QueryData, Variables> = gql`
    query letters($limit: Int, $offset: Int) {
      letters(limit: $limit) {
        letter
        position
      }
    }
  `;

  const data = 'ABCDEFG'
    .split('')
    .map((letter, index) => ({ letter, position: index + 1 }));

  const link = new ApolloLink((operation) => {
    const { offset = 0, limit = 2 } = operation.variables;
    const letters = data.slice(offset, offset + limit);

    return new Observable((observer) => {
      setTimeout(() => {
        observer.next({ data: { letters } });
        observer.complete();
      }, 10);
    });
  });

  return { query, link, data };
}

interface ErrorCaseData {
  currentUser: {
    id: string;
    name: string | null;
  };
}

function useErrorCase<TData extends ErrorCaseData>(
  {
    data,
    networkError,
    graphQLErrors,
  }: {
    data?: TData;
    networkError?: Error;
    graphQLErrors?: GraphQLError[];
  } = Object.create(null)
) {
  const query: TypedDocumentNode<TData, never> = gql`
    query MyQuery {
      currentUser {
        id
        name
      }
    }
  `;

  const mock: MockedResponse<TData> = compact({
    request: { query },
    result: (data || graphQLErrors) && compact({ data, errors: graphQLErrors }),
    error: networkError,
  });

  return { query, mocks: [mock] };
}

function useVariablesQueryCase() {
  const CHARACTERS = ['Spider-Man', 'Black Widow', 'Iron Man', 'Hulk'];

  interface QueryData {
    character: {
      id: string;
      name: string;
    };
  }

  interface QueryVariables {
    id: string;
  }

  const query: TypedDocumentNode<QueryData, QueryVariables> = gql`
    query CharacterQuery($id: ID!) {
      character(id: $id) {
        id
        name
      }
    }
  `;

  const mocks = CHARACTERS.map((name, index) => ({
    request: { query, variables: { id: String(index + 1) } },
    result: { data: { character: { id: String(index + 1), name } } },
  }));

  return { query, mocks };
}

function wait(delay: number) {
  return new Promise((resolve) => setTimeout(resolve, delay));
}

describe('useSuspenseQuery', () => {
  it('validates the GraphQL query as a query', () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();

    const query = gql`
      mutation ShouldThrow {
        createException
      }
    `;

    expect(() => {
      renderHook(() => useSuspenseQuery(query), {
        wrapper: ({ children }) => <MockedProvider>{children}</MockedProvider>,
      });
    }).toThrowError(
      new InvariantError(
        'Running a Query requires a graphql Query, but a Mutation was used instead.'
      )
    );

    consoleSpy.mockRestore();
  });

  it('ensures a suspense cache is provided', () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
    const { query } = useSimpleQueryCase();

    const client = new ApolloClient({ cache: new InMemoryCache() });

    expect(() => {
      renderHook(() => useSuspenseQuery(query), {
        wrapper: ({ children }) => (
          <ApolloProvider client={client} suspenseCache={undefined}>
            {children}
          </ApolloProvider>
        ),
      });
    }).toThrowError(
      new InvariantError(
        'Could not find a "suspenseCache" in the context or passed in as an option. ' +
          'Wrap the root component in an <ApolloProvider> and provide a suspenseCache, ' +
          'or pass a SuspenseCache instance in via options.'
      )
    );

    consoleSpy.mockRestore();
  });

  it('does not throw when provided a `suspenseCache` option', async () => {
    const { query, mocks } = useSimpleQueryCase();

    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: new MockLink(mocks),
    });
    const suspenseCache = new SuspenseCache();

    let hook: RenderHookResult<unknown, unknown>;

    expect(() => {
      hook = renderHook(() => useSuspenseQuery(query, { suspenseCache }), {
        wrapper: ({ children }) => (
          <ApolloProvider client={client} suspenseCache={undefined}>
            <Suspense fallback="Loading">{children}</Suspense>
          </ApolloProvider>
        ),
      });
    }).not.toThrow();

    // Avoid `act` warnings by waiting for the hook to finish suspending.
    await waitFor(() => {
      expect(hook.result.current).toBeDefined();
    });
  });

  it('prioritizes the `suspenseCache` option over the context value', () => {
    const { query, mocks } = useSimpleQueryCase();

    const directSuspenseCache = new SuspenseCache();
    const contextSuspenseCache = new SuspenseCache();

    const client = new ApolloClient({
      link: new MockLink(mocks),
      cache: new InMemoryCache(),
    });

    renderHook(
      () => useSuspenseQuery(query, { suspenseCache: directSuspenseCache }),
      {
        wrapper: ({ children }) => (
          <ApolloProvider client={client} suspenseCache={contextSuspenseCache}>
            {children}
          </ApolloProvider>
        ),
      }
    );

    expect(directSuspenseCache['subscriptions'].size).toBe(1);
    expect(contextSuspenseCache['subscriptions'].size).toBe(0);
  });

  it('ensures a valid fetch policy is used', () => {
    const INVALID_FETCH_POLICIES = ['cache-only', 'standby'];
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
    const { query } = useSimpleQueryCase();

    INVALID_FETCH_POLICIES.forEach((fetchPolicy: any) => {
      expect(() => {
        renderHook(() => useSuspenseQuery(query, { fetchPolicy }), {
          wrapper: ({ children }) => (
            <MockedProvider>{children}</MockedProvider>
          ),
        });
      }).toThrowError(
        new InvariantError(
          `The fetch policy \`${fetchPolicy}\` is not supported with suspense.`
        )
      );
    });

    consoleSpy.mockRestore();
  });

  it('suspends a query and returns results', async () => {
    const { query, mocks } = useSimpleQueryCase();

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query),
      { mocks }
    );

    // ensure the hook suspends immediately
    expect(renders.suspenseCount).toBe(1);
    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        error: undefined,
      });
    });

    expect(renders.suspenseCount).toBe(1);
    expect(renders.count).toBe(2);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('suspends a query with variables and returns results', async () => {
    const { query, mocks } = useVariablesQueryCase();

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { variables: { id: '1' } }),
      { mocks }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        error: undefined,
      });
    });

    expect(renders.suspenseCount).toBe(1);
    expect(renders.count).toBe(2);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('returns the same results for the same variables', async () => {
    const { query, mocks } = useVariablesQueryCase();

    const { result, rerender, renders } = renderSuspenseHook(
      ({ id }) => useSuspenseQuery(query, { variables: { id } }),
      { mocks, initialProps: { id: '1' } }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        error: undefined,
      });
    });

    const previousResult = result.current;

    rerender({ id: '1' });

    expect(result.current).toBe(previousResult);
    expect(renders.count).toBe(3);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('ensures result is referentially stable', async () => {
    const { query, mocks } = useVariablesQueryCase();

    const { result, rerender } = renderSuspenseHook(
      ({ id }) => useSuspenseQuery(query, { variables: { id } }),
      { mocks, initialProps: { id: '1' } }
    );

    expect(screen.getByText('loading')).toBeInTheDocument();

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        error: undefined,
      });
    });

    const previousResult = result.current;

    rerender({ id: '1' });

    expect(result.current).toBe(previousResult);
  });

  it('ensures refetch, fetchMore, and subscribeToMore are referentially stable even after result data has changed', async () => {
    const { query, mocks } = useSimpleQueryCase();

    const client = new ApolloClient({
      link: new MockLink(mocks),
      cache: new InMemoryCache(),
    });

    const { result } = renderSuspenseHook(() => useSuspenseQuery(query), {
      client,
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        error: undefined,
      });
    });

    const previousResult = result.current;

    client.writeQuery({
      query,
      data: { greeting: 'Updated cache greeting' },
    });

    await waitFor(() => {
      expect(result.current.data).toEqual({
        greeting: 'Updated cache greeting',
      });
    });

    expect(result.current.fetchMore).toBe(previousResult.fetchMore);
    expect(result.current.refetch).toBe(previousResult.refetch);
    expect(result.current.subscribeToMore).toBe(previousResult.subscribeToMore);
  });

  it('enables canonical results when canonizeResults is "true"', async () => {
    interface Result {
      __typename: string;
      value: number;
    }

    const cache = new InMemoryCache({
      typePolicies: {
        Result: {
          keyFields: false,
        },
      },
    });

    const query: TypedDocumentNode<{ results: Result[] }> = gql`
      query {
        results {
          value
        }
      }
    `;

    const results: Result[] = [
      { __typename: 'Result', value: 0 },
      { __typename: 'Result', value: 1 },
      { __typename: 'Result', value: 1 },
      { __typename: 'Result', value: 2 },
      { __typename: 'Result', value: 3 },
      { __typename: 'Result', value: 5 },
    ];

    cache.writeQuery({
      query,
      data: { results },
    });

    const { result } = renderSuspenseHook(
      () => useSuspenseQuery(query, { canonizeResults: true }),
      { cache }
    );

    const { data } = result.current;
    const resultSet = new Set(data.results);
    const values = Array.from(resultSet).map((item) => item.value);

    expect(data).toEqual({ results });
    expect(data.results.length).toBe(6);
    expect(resultSet.size).toBe(5);
    expect(values).toEqual([0, 1, 2, 3, 5]);
  });

  it("can disable canonical results when the cache's canonizeResults setting is true", async () => {
    interface Result {
      __typename: string;
      value: number;
    }

    const cache = new InMemoryCache({
      canonizeResults: true,
      typePolicies: {
        Result: {
          keyFields: false,
        },
      },
    });

    const query: TypedDocumentNode<{ results: Result[] }> = gql`
      query {
        results {
          value
        }
      }
    `;

    const results: Result[] = [
      { __typename: 'Result', value: 0 },
      { __typename: 'Result', value: 1 },
      { __typename: 'Result', value: 1 },
      { __typename: 'Result', value: 2 },
      { __typename: 'Result', value: 3 },
      { __typename: 'Result', value: 5 },
    ];

    cache.writeQuery({
      query,
      data: { results },
    });

    const { result } = renderSuspenseHook(
      () => useSuspenseQuery(query, { canonizeResults: false }),
      { cache }
    );

    const { data } = result.current;
    const resultSet = new Set(data.results);
    const values = Array.from(resultSet).map((item) => item.value);

    expect(data).toEqual({ results });
    expect(data.results.length).toBe(6);
    expect(resultSet.size).toBe(6);
    expect(values).toEqual([0, 1, 1, 2, 3, 5]);
  });

  it('tears down the query on unmount', async () => {
    const { query, mocks } = useSimpleQueryCase();

    const client = new ApolloClient({
      link: new ApolloLink(() => Observable.of(mocks[0].result)),
      cache: new InMemoryCache(),
    });

    const suspenseCache = new SuspenseCache();

    const { result, unmount } = renderSuspenseHook(
      () => useSuspenseQuery(query),
      { client, suspenseCache }
    );

    await waitFor(() =>
      expect(result.current.data).toEqual(mocks[0].result.data)
    );

    expect(client.getObservableQueries().size).toBe(1);
    expect(suspenseCache['subscriptions'].size).toBe(1);

    unmount();

    // We need to wait a tick since the cleanup is run in a setTimeout to
    // prevent strict mode bugs.
    await wait(0);

    expect(client.getObservableQueries().size).toBe(0);
    expect(suspenseCache['subscriptions'].size).toBe(0);
  });

  it('tears down all queries when rendering with multiple variable sets', async () => {
    const { query, mocks } = useVariablesQueryCase();

    const client = new ApolloClient({
      link: new MockLink(mocks),
      cache: new InMemoryCache(),
    });

    const suspenseCache = new SuspenseCache();

    const { rerender, result, unmount } = renderSuspenseHook(
      ({ id }) => useSuspenseQuery(query, { variables: { id } }),
      { client, suspenseCache, initialProps: { id: '1' } }
    );

    await waitFor(() =>
      expect(result.current.data).toEqual(mocks[0].result.data)
    );

    rerender({ id: '2' });

    await waitFor(() => {
      expect(result.current.data).toEqual(mocks[1].result.data);
    });

    expect(client.getObservableQueries().size).toBe(2);
    expect(suspenseCache['subscriptions'].size).toBe(2);

    unmount();

    // We need to wait a tick since the cleanup is run in a setTimeout to
    // prevent strict mode bugs.
    await wait(0);

    expect(client.getObservableQueries().size).toBe(0);
    expect(suspenseCache['subscriptions'].size).toBe(0);
  });

  it('tears down all queries when multiple clients are used', async () => {
    const { query } = useVariablesQueryCase();

    const client1 = new ApolloClient({
      link: new MockLink([
        {
          request: { query, variables: { id: '1' } },
          result: { data: { character: { id: '1', name: 'Client 1' } } },
        },
      ]),
      cache: new InMemoryCache(),
    });

    const client2 = new ApolloClient({
      link: new MockLink([
        {
          request: { query, variables: { id: '1' } },
          result: { data: { character: { id: '1', name: 'Client 2' } } },
        },
      ]),
      cache: new InMemoryCache(),
    });

    const suspenseCache = new SuspenseCache();

    const { rerender, result, unmount } = renderSuspenseHook(
      ({ client }) =>
        useSuspenseQuery(query, { client, variables: { id: '1' } }),
      { suspenseCache, initialProps: { client: client1 } }
    );

    await waitFor(() =>
      expect(result.current.data).toEqual({
        character: { id: '1', name: 'Client 1' },
      })
    );

    rerender({ client: client2 });

    await waitFor(() => {
      expect(result.current.data).toEqual({
        character: { id: '1', name: 'Client 2' },
      });
    });


    expect(client1.getObservableQueries().size).toBe(1);
    expect(client2.getObservableQueries().size).toBe(1);
    expect(suspenseCache['subscriptions'].size).toBe(2);

    unmount();

    // We need to wait a tick since the cleanup is run in a setTimeout to
    // prevent strict mode bugs.
    await wait(0);

    expect(client1.getObservableQueries().size).toBe(0);
    expect(client2.getObservableQueries().size).toBe(0);
    expect(suspenseCache['subscriptions'].size).toBe(0);
  });

  it('allows the client to be overridden', async () => {
    const { query } = useSimpleQueryCase();

    const globalClient = new ApolloClient({
      link: new ApolloLink(() =>
        Observable.of({ data: { greeting: 'global hello' } })
      ),
      cache: new InMemoryCache(),
    });

    const localClient = new ApolloClient({
      link: new ApolloLink(() =>
        Observable.of({ data: { greeting: 'local hello' } })
      ),
      cache: new InMemoryCache(),
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { client: localClient }),
      { client: globalClient }
    );

    await waitFor(() =>
      expect(result.current.data).toEqual({ greeting: 'local hello' })
    );

    expect(renders.frames).toMatchObject([
      {
        data: { greeting: 'local hello' },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('allows the client to be overridden in strict mode', async () => {
    const { query } = useSimpleQueryCase();

    const globalClient = new ApolloClient({
      link: new ApolloLink(() =>
        Observable.of({ data: { greeting: 'global hello' } })
      ),
      cache: new InMemoryCache(),
    });

    const localClient = new ApolloClient({
      link: new ApolloLink(() =>
        Observable.of({ data: { greeting: 'local hello' } })
      ),
      cache: new InMemoryCache(),
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { client: localClient }),
      { strictMode: true, client: globalClient }
    );

    await waitFor(() =>
      expect(result.current.data).toEqual({ greeting: 'local hello' })
    );

    // React double invokes the render function in strict mode so we expect
    // to render 2 frames after the initial suspense.
    expect(renders.frames).toMatchObject([
      {
        data: { greeting: 'local hello' },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: { greeting: 'local hello' },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('returns the client used in the result', async () => {
    const { query } = useSimpleQueryCase();

    const client = new ApolloClient({
      link: new ApolloLink(() =>
        Observable.of({ data: { greeting: 'hello' } })
      ),
      cache: new InMemoryCache(),
    });

    const { result } = renderSuspenseHook(() => useSuspenseQuery(query), {
      client,
    });

    // wait for query to finish suspending to avoid warnings
    await waitFor(() => {
      expect(result.current.data).toEqual({ greeting: 'hello' });
    });

    expect(result.current.client).toBe(client);
  });

  it('suspends when changing variables', async () => {
    const { query, mocks } = useVariablesQueryCase();

    const { result, rerender, renders } = renderSuspenseHook(
      ({ id }) => useSuspenseQuery(query, { variables: { id } }),
      { mocks, initialProps: { id: '1' } }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    rerender({ id: '2' });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(4);
    expect(renders.suspenseCount).toBe(2);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('suspends and fetches data from new client when changing clients', async () => {
    const { query } = useSimpleQueryCase();

    const client1 = new ApolloClient({
      cache: new InMemoryCache(),
      link: new MockLink([
        {
          request: { query },
          result: { data: { greeting: 'Hello client 1' } },
        },
      ]),
    });

    const client2 = new ApolloClient({
      cache: new InMemoryCache(),
      link: new MockLink([
        {
          request: { query },
          result: { data: { greeting: 'Hello client 2' } },
        },
      ]),
    });

    const { result, rerender, renders } = renderSuspenseHook(
      ({ client }) => useSuspenseQuery(query, { client }),
      { initialProps: { client: client1 } }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { greeting: 'Hello client 1' },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    rerender({ client: client2 });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { greeting: 'Hello client 2' },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(4);
    expect(renders.suspenseCount).toBe(2);
    expect(renders.frames).toMatchObject([
      {
        data: { greeting: 'Hello client 1' },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: { greeting: 'Hello client 2' },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('responds to cache updates after changing variables', async () => {
    const { query, mocks } = useVariablesQueryCase();

    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: new MockLink(mocks),
    });

    const { result, rerender, renders } = renderSuspenseHook(
      ({ id }) => useSuspenseQuery(query, { variables: { id } }),
      { client, initialProps: { id: '1' } }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    rerender({ id: '2' });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    client.writeQuery({
      query,
      variables: { id: '2' },
      data: { character: { id: '2', name: 'Cached hero' } },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { character: { id: '2', name: 'Cached hero' } },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.suspenseCount).toBe(2);
    expect(renders.count).toBe(5);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: { character: { id: '2', name: 'Cached hero' } },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('uses previously fetched result and does not suspend when switching back to already fetched variables', async () => {
    const { query, mocks } = useVariablesQueryCase();

    const { result, rerender, renders } = renderSuspenseHook(
      ({ id }) => useSuspenseQuery(query, { variables: { id } }),
      { mocks, initialProps: { id: '1' } }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    rerender({ id: '2' });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    rerender({ id: '1' });

    expect(result.current).toMatchObject({
      ...mocks[0].result,
      networkStatus: NetworkStatus.ready,
      error: undefined,
    });

    expect(renders.count).toBe(5);
    expect(renders.suspenseCount).toBe(2);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('responds to cache updates after changing back to already fetched variables', async () => {
    const { query, mocks } = useVariablesQueryCase();

    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: new MockLink(mocks),
    });

    const { result, rerender, renders } = renderSuspenseHook(
      ({ id }) => useSuspenseQuery(query, { variables: { id } }),
      { client, initialProps: { id: '1' } }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    rerender({ id: '2' });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    rerender({ id: '1' });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    client.writeQuery({
      query,
      variables: { id: '1' },
      data: { character: { id: '1', name: 'Cached hero' } },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { character: { id: '1', name: 'Cached hero' } },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.suspenseCount).toBe(2);
    expect(renders.count).toBe(6);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: { character: { id: '1', name: 'Cached hero' } },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('does not suspend when data is in the cache and using a "cache-first" fetch policy', async () => {
    const { query, mocks } = useSimpleQueryCase();

    const cache = new InMemoryCache();

    cache.writeQuery({
      query,
      data: { greeting: 'hello from cache' },
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { fetchPolicy: 'cache-first' }),
      { cache, mocks }
    );

    expect(result.current).toMatchObject({
      data: { greeting: 'hello from cache' },
      networkStatus: NetworkStatus.ready,
      error: undefined,
    });

    expect(renders.count).toBe(1);
    expect(renders.suspenseCount).toBe(0);
    expect(renders.frames).toMatchObject([
      {
        data: { greeting: 'hello from cache' },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('does not initiate a network request when data is in the cache and using a "cache-first" fetch policy', async () => {
    let fetchCount = 0;
    const { query, mocks } = useSimpleQueryCase();

    const cache = new InMemoryCache();

    const link = new ApolloLink(() => {
      return new Observable((observer) => {
        fetchCount++;

        const mock = mocks[0];

        observer.next(mock.result);
        observer.complete();
      });
    });

    cache.writeQuery({
      query,
      data: { greeting: 'hello from cache' },
    });

    renderSuspenseHook(
      () => useSuspenseQuery(query, { fetchPolicy: 'cache-first' }),
      { cache, link, initialProps: { id: '1' } }
    );

    expect(fetchCount).toBe(0);
  });

  it('suspends when partial data is in the cache and using a "cache-first" fetch policy', async () => {
    const fullQuery = gql`
      query {
        character {
          id
          name
        }
      }
    `;

    const partialQuery = gql`
      query {
        character {
          id
        }
      }
    `;

    const mocks = [
      {
        request: { query: fullQuery },
        result: { data: { character: { id: '1', name: 'Doctor Strange' } } },
      },
    ];

    const cache = new InMemoryCache();

    cache.writeQuery({
      query: partialQuery,
      data: { character: { id: '1' } },
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(fullQuery, { fetchPolicy: 'cache-first' }),
      { cache, mocks }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(2);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('does not suspend when partial data is in the cache and using a "cache-first" fetch policy with returnPartialData', async () => {
    const fullQuery = gql`
      query {
        character {
          id
          name
        }
      }
    `;

    const partialQuery = gql`
      query {
        character {
          id
        }
      }
    `;

    const mocks = [
      {
        request: { query: fullQuery },
        result: { data: { character: { id: '1', name: 'Doctor Strange' } } },
      },
    ];

    const cache = new InMemoryCache();

    cache.writeQuery({
      query: partialQuery,
      data: { character: { id: '1' } },
    });

    const { result, renders } = renderSuspenseHook(
      () =>
        useSuspenseQuery(fullQuery, {
          fetchPolicy: 'cache-first',
          returnPartialData: true,
        }),
      { cache, mocks }
    );

    expect(renders.suspenseCount).toBe(0);
    expect(result.current).toMatchObject({
      data: { character: { id: '1' } },
      networkStatus: NetworkStatus.loading,
      error: undefined,
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(2);
    expect(renders.suspenseCount).toBe(0);
    expect(renders.frames).toMatchObject([
      {
        data: { character: { id: '1' } },
        networkStatus: NetworkStatus.loading,
        error: undefined,
      },
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('suspends and does not use partial data when changing variables and using a "cache-first" fetch policy with returnPartialData', async () => {
    const { query: fullQuery, mocks } = useVariablesQueryCase();

    const partialQuery = gql`
      query ($id: ID!) {
        character(id: $id) {
          id
        }
      }
    `;

    const cache = new InMemoryCache();

    cache.writeQuery({
      query: partialQuery,
      data: { character: { id: '1' } },
      variables: { id: '1' },
    });

    const { result, renders, rerender } = renderSuspenseHook(
      ({ id }) =>
        useSuspenseQuery(fullQuery, {
          fetchPolicy: 'cache-first',
          returnPartialData: true,
          variables: { id },
        }),
      { cache, mocks, initialProps: { id: '1' } }
    );

    expect(renders.suspenseCount).toBe(0);
    expect(result.current).toMatchObject({
      data: { character: { id: '1' } },
      networkStatus: NetworkStatus.loading,
      error: undefined,
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    rerender({ id: '2' });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(4);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        data: { character: { id: '1' } },
        networkStatus: NetworkStatus.loading,
        error: undefined,
      },
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('suspends when data is in the cache and using a "network-only" fetch policy', async () => {
    const { query, mocks } = useSimpleQueryCase();

    const cache = new InMemoryCache();

    cache.writeQuery({
      query,
      data: { greeting: 'hello from cache' },
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { fetchPolicy: 'network-only' }),
      { cache, mocks }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(2);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        data: { greeting: 'Hello' },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('suspends when partial data is in the cache and using a "network-only" fetch policy with returnPartialData', async () => {
    const fullQuery = gql`
      query {
        character {
          id
          name
        }
      }
    `;

    const partialQuery = gql`
      query {
        character {
          id
        }
      }
    `;

    const mocks = [
      {
        request: { query: fullQuery },
        result: { data: { character: { id: '1', name: 'Doctor Strange' } } },
      },
    ];

    const cache = new InMemoryCache();

    cache.writeQuery({
      query: partialQuery,
      data: { character: { id: '1' } },
    });

    const { result, renders } = renderSuspenseHook(
      () =>
        useSuspenseQuery(fullQuery, {
          fetchPolicy: 'network-only',
          returnPartialData: true,
        }),
      { cache, mocks }
    );

    expect(renders.suspenseCount).toBe(1);

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(2);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('suspends and does not overwrite cache when data is in the cache and using a "no-cache" fetch policy', async () => {
    const { query, mocks } = useSimpleQueryCase();

    const cache = new InMemoryCache();

    cache.writeQuery({
      query,
      data: { greeting: 'hello from cache' },
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { fetchPolicy: 'no-cache' }),
      { cache, mocks }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    const cachedData = cache.readQuery({ query });

    expect(renders.count).toBe(2);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        data: { greeting: 'Hello' },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
    expect(cachedData).toEqual({ greeting: 'hello from cache' });
  });

  it('maintains results when rerendering a query using a "no-cache" fetch policy', async () => {
    const { query, mocks } = useSimpleQueryCase();

    const cache = new InMemoryCache();

    const { result, rerender, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { fetchPolicy: 'no-cache' }),
      { cache, mocks }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(2);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        data: { greeting: 'Hello' },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);

    rerender();

    expect(result.current).toMatchObject({
      ...mocks[0].result,
      networkStatus: NetworkStatus.ready,
      error: undefined,
    });
    expect(renders.count).toBe(3);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        data: { greeting: 'Hello' },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: { greeting: 'Hello' },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('suspends when partial data is in the cache and using a "no-cache" fetch policy with returnPartialData', async () => {
    const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();

    const fullQuery = gql`
      query {
        character {
          id
          name
        }
      }
    `;

    const partialQuery = gql`
      query {
        character {
          id
        }
      }
    `;

    const mocks = [
      {
        request: { query: fullQuery },
        result: { data: { character: { id: '1', name: 'Doctor Strange' } } },
      },
    ];

    const cache = new InMemoryCache();

    cache.writeQuery({
      query: partialQuery,
      data: { character: { id: '1' } },
    });

    const { result, renders } = renderSuspenseHook(
      () =>
        useSuspenseQuery(fullQuery, {
          fetchPolicy: 'no-cache',
          returnPartialData: true,
        }),
      { cache, mocks }
    );

    expect(renders.suspenseCount).toBe(1);

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(2);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);

    consoleSpy.mockRestore();
  });

  it('warns when using returnPartialData with a "no-cache" fetch policy', async () => {
    const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();

    const { query, mocks } = useSimpleQueryCase();

    renderSuspenseHook(
      () =>
        useSuspenseQuery(query, {
          fetchPolicy: 'no-cache',
          returnPartialData: true,
        }),
      { mocks }
    );

    expect(console.warn).toHaveBeenCalledTimes(1);
    expect(console.warn).toHaveBeenCalledWith(
      'Using `returnPartialData` with a `no-cache` fetch policy has no effect. To read partial data from the cache, consider using an alternate fetch policy.'
    );

    consoleSpy.mockRestore();
  });

  it('does not suspend when data is in the cache and using a "cache-and-network" fetch policy', async () => {
    const { query, mocks } = useSimpleQueryCase();

    const cache = new InMemoryCache();

    cache.writeQuery({
      query,
      data: { greeting: 'hello from cache' },
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { fetchPolicy: 'cache-and-network' }),
      { cache, mocks }
    );

    expect(result.current).toMatchObject({
      data: { greeting: 'hello from cache' },
      networkStatus: NetworkStatus.loading,
      error: undefined,
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(2);
    expect(renders.suspenseCount).toBe(0);
    expect(renders.frames).toMatchObject([
      {
        data: { greeting: 'hello from cache' },
        networkStatus: NetworkStatus.loading,
        error: undefined,
      },
      {
        data: { greeting: 'Hello' },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('does not suspend when partial data is in the cache and using a "cache-and-network" fetch policy with returnPartialData', async () => {
    const fullQuery = gql`
      query {
        character {
          id
          name
        }
      }
    `;

    const partialQuery = gql`
      query {
        character {
          id
        }
      }
    `;

    const mocks = [
      {
        request: { query: fullQuery },
        result: { data: { character: { id: '1', name: 'Doctor Strange' } } },
      },
    ];

    const cache = new InMemoryCache();

    cache.writeQuery({
      query: partialQuery,
      data: { character: { id: '1' } },
    });

    const { result, renders } = renderSuspenseHook(
      () =>
        useSuspenseQuery(fullQuery, {
          fetchPolicy: 'cache-and-network',
          returnPartialData: true,
        }),
      { cache, mocks }
    );

    expect(renders.suspenseCount).toBe(0);
    expect(result.current).toMatchObject({
      data: { character: { id: '1' } },
      networkStatus: NetworkStatus.loading,
      error: undefined,
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(2);
    expect(renders.suspenseCount).toBe(0);
    expect(renders.frames).toMatchObject([
      {
        data: { character: { id: '1' } },
        networkStatus: NetworkStatus.loading,
        error: undefined,
      },
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('suspends and does not use partial data when changing variables and using a "cache-and-network" fetch policy with returnPartialData', async () => {
    const { query: fullQuery, mocks } = useVariablesQueryCase();

    const partialQuery = gql`
      query ($id: ID!) {
        character(id: $id) {
          id
        }
      }
    `;

    const cache = new InMemoryCache();

    cache.writeQuery({
      query: partialQuery,
      data: { character: { id: '1' } },
      variables: { id: '1' },
    });

    const { result, renders, rerender } = renderSuspenseHook(
      ({ id }) =>
        useSuspenseQuery(fullQuery, {
          fetchPolicy: 'cache-and-network',
          returnPartialData: true,
          variables: { id },
        }),
      { cache, mocks, initialProps: { id: '1' } }
    );

    expect(renders.suspenseCount).toBe(0);
    expect(result.current).toMatchObject({
      data: { character: { id: '1' } },
      networkStatus: NetworkStatus.loading,
      error: undefined,
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    rerender({ id: '2' });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(4);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        data: { character: { id: '1' } },
        networkStatus: NetworkStatus.loading,
        error: undefined,
      },
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it.each<SuspenseQueryHookFetchPolicy>([
    'cache-first',
    'network-only',
    'no-cache',
    'cache-and-network',
  ])(
    'returns previous data when changing variables and using a "%s" with an "initial" suspense policy',
    async (fetchPolicy) => {
      const { query, mocks } = useVariablesQueryCase();

      const { result, rerender, renders } = renderSuspenseHook(
        ({ id }) =>
          useSuspenseQuery(query, {
            fetchPolicy,
            suspensePolicy: 'initial',
            variables: { id },
          }),
        { mocks, initialProps: { id: '1' } }
      );

      expect(renders.suspenseCount).toBe(1);
      await waitFor(() => {
        expect(result.current).toMatchObject({
          ...mocks[0].result,
          networkStatus: NetworkStatus.ready,
          error: undefined,
        });
      });

      rerender({ id: '2' });

      await waitFor(() => {
        expect(result.current).toMatchObject({
          ...mocks[1].result,
          networkStatus: NetworkStatus.ready,
          error: undefined,
        });
      });

      // Renders:
      // 1. Initiate fetch and suspend
      // 2. Unsuspend and return results from initial fetch
      // 3. Change variables
      // 4. Unsuspend and return results from refetch
      expect(renders.count).toBe(4);
      expect(renders.suspenseCount).toBe(1);
      expect(renders.frames).toMatchObject([
        {
          ...mocks[0].result,
          networkStatus: NetworkStatus.ready,
          error: undefined,
        },
        {
          ...mocks[0].result,
          networkStatus: NetworkStatus.setVariables,
          error: undefined,
        },
        {
          ...mocks[1].result,
          networkStatus: NetworkStatus.ready,
          error: undefined,
        },
      ]);
    }
  );

  it.each<SuspenseQueryHookFetchPolicy>([
    'cache-first',
    'network-only',
    'cache-and-network',
  ])(
    'writes to the cache when using a "%s" fetch policy',
    async (fetchPolicy) => {
      const { query, mocks } = useVariablesQueryCase();

      const cache = new InMemoryCache();

      const { result } = renderSuspenseHook(
        ({ id }) => useSuspenseQuery(query, { fetchPolicy, variables: { id } }),
        { cache, mocks, initialProps: { id: '1' } }
      );

      await waitFor(() => {
        expect(result.current.data).toEqual(mocks[0].result.data);
      });

      const cachedData = cache.readQuery({ query, variables: { id: '1' } });

      expect(cachedData).toEqual(mocks[0].result.data);
    }
  );

  it('does not write to the cache when using a "no-cache" fetch policy', async () => {
    const { query, mocks } = useVariablesQueryCase();

    const cache = new InMemoryCache();

    const { result } = renderSuspenseHook(
      ({ id }) =>
        useSuspenseQuery(query, { fetchPolicy: 'no-cache', variables: { id } }),
      { cache, mocks, initialProps: { id: '1' } }
    );

    await waitFor(() => {
      expect(result.current.data).toEqual(mocks[0].result.data);
    });

    const cachedData = cache.readQuery({ query, variables: { id: '1' } });

    expect(cachedData).toBeNull();
  });

  it.each<SuspenseQueryHookFetchPolicy>([
    'cache-first',
    'network-only',
    'cache-and-network',
  ])(
    'responds to cache updates when using a "%s" fetch policy',
    async (fetchPolicy) => {
      const { query, mocks } = useSimpleQueryCase();

      const client = new ApolloClient({
        cache: new InMemoryCache(),
        link: new MockLink(mocks),
      });

      const { result, renders } = renderSuspenseHook(
        () => useSuspenseQuery(query, { fetchPolicy }),
        { client }
      );

      await waitFor(() => {
        expect(result.current.data).toEqual(mocks[0].result.data);
      });

      client.writeQuery({
        query,
        data: { greeting: 'Updated hello' },
      });

      await waitFor(() => {
        expect(result.current).toMatchObject({
          data: { greeting: 'Updated hello' },
          networkStatus: NetworkStatus.ready,
          error: undefined,
        });
      });
      expect(renders.suspenseCount).toBe(1);
      expect(renders.count).toBe(3);
      expect(renders.frames).toMatchObject([
        {
          ...mocks[0].result,
          networkStatus: NetworkStatus.ready,
          error: undefined,
        },
        {
          data: { greeting: 'Updated hello' },
          networkStatus: NetworkStatus.ready,
          error: undefined,
        },
      ]);
    }
  );

  it('does not respond to cache updates when using a "no-cache" fetch policy', async () => {
    const { query, mocks } = useSimpleQueryCase();

    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: new MockLink(mocks),
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { fetchPolicy: 'no-cache' }),
      { client }
    );

    await waitFor(() => {
      expect(result.current.data).toEqual(mocks[0].result.data);
    });

    client.writeQuery({
      query,
      data: { greeting: 'Updated hello' },
    });

    // Wait for a while to ensure no updates happen asynchronously
    await wait(100);

    expect(result.current).toMatchObject({
      ...mocks[0].result,
      networkStatus: NetworkStatus.ready,
      error: undefined,
    });
    expect(renders.suspenseCount).toBe(1);
    expect(renders.count).toBe(2);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it.each<SuspenseQueryHookFetchPolicy>([
    'cache-first',
    'network-only',
    'no-cache',
    'cache-and-network',
  ])(
    're-suspends the component when changing variables and using a "%s" fetch policy',
    async (fetchPolicy) => {
      const { query, mocks } = useVariablesQueryCase();

      const { result, rerender, renders } = renderSuspenseHook(
        ({ id }) => useSuspenseQuery(query, { fetchPolicy, variables: { id } }),
        { mocks, initialProps: { id: '1' } }
      );

      expect(renders.suspenseCount).toBe(1);
      await waitFor(() => {
        expect(result.current).toMatchObject({
          ...mocks[0].result,
          error: undefined,
        });
      });

      rerender({ id: '2' });

      await waitFor(() => {
        expect(result.current).toMatchObject({
          ...mocks[1].result,
          networkStatus: NetworkStatus.ready,
          error: undefined,
        });
      });

      // Renders:
      // 1. Initiate fetch and suspend
      // 2. Unsuspend and return results from initial fetch
      // 3. Change variables and suspend
      // 5. Unsuspend and return results from refetch
      expect(renders.count).toBe(4);
      expect(renders.suspenseCount).toBe(2);
      expect(renders.frames).toMatchObject([
        {
          ...mocks[0].result,
          networkStatus: NetworkStatus.ready,
          error: undefined,
        },
        {
          ...mocks[1].result,
          networkStatus: NetworkStatus.ready,
          error: undefined,
        },
      ]);
    }
  );

  it.each<SuspenseQueryHookFetchPolicy>([
    'cache-first',
    'network-only',
    'no-cache',
    'cache-and-network',
  ])(
    're-suspends the component when changing queries and using a "%s" fetch policy',
    async (fetchPolicy) => {
      const query1: TypedDocumentNode<{ hello: string }> = gql`
        query Query1 {
          hello
        }
      `;

      const query2: TypedDocumentNode<{ world: string }> = gql`
        query Query2 {
          world
        }
      `;

      const mocks = [
        {
          request: { query: query1 },
          result: { data: { hello: 'query1' } },
        },
        {
          request: { query: query2 },
          result: { data: { world: 'query2' } },
        },
      ];

      const { result, rerender, renders } = renderSuspenseHook(
        ({ query }) => useSuspenseQuery(query, { fetchPolicy }),
        { mocks, initialProps: { query: query1 as DocumentNode } }
      );

      expect(renders.suspenseCount).toBe(1);
      await waitFor(() => {
        expect(result.current).toMatchObject({
          ...mocks[0].result,
          networkStatus: NetworkStatus.ready,
          error: undefined,
        });
      });

      rerender({ query: query2 });

      await waitFor(() => {
        expect(result.current).toMatchObject({
          ...mocks[1].result,
          networkStatus: NetworkStatus.ready,
          error: undefined,
        });
      });

      // Renders:
      // 1. Initiate fetch and suspend
      // 2. Unsuspend and return results from initial fetch
      // 3. Change queries and suspend
      // 5. Unsuspend and return results from refetch
      expect(renders.count).toBe(4);
      expect(renders.suspenseCount).toBe(2);
      expect(renders.frames).toMatchObject([
        {
          ...mocks[0].result,
          networkStatus: NetworkStatus.ready,
          error: undefined,
        },
        {
          ...mocks[1].result,
          networkStatus: NetworkStatus.ready,
          error: undefined,
        },
      ]);
    }
  );

  it.each<SuspenseQueryHookFetchPolicy>([
    'cache-first',
    'network-only',
    'no-cache',
    'cache-and-network',
  ])(
    'ensures data is fetched the correct amount of times when changing variables and using a "%s" fetch policy',
    async (fetchPolicy) => {
      const { query, mocks } = useVariablesQueryCase();

      let fetchCount = 0;

      const link = new ApolloLink((operation) => {
        return new Observable((observer) => {
          fetchCount++;

          const mock = mocks.find(({ request }) =>
            equal(request.variables, operation.variables)
          );

          if (!mock) {
            throw new Error('Could not find mock for operation');
          }

          observer.next(mock.result);
          observer.complete();
        });
      });

      const { result, rerender } = renderSuspenseHook(
        ({ id }) => useSuspenseQuery(query, { fetchPolicy, variables: { id } }),
        { link, initialProps: { id: '1' } }
      );

      await waitFor(() => {
        expect(result.current.data).toEqual(mocks[0].result.data);
      });

      expect(fetchCount).toBe(1);

      rerender({ id: '2' });

      await waitFor(() => {
        expect(result.current.data).toEqual(mocks[1].result.data);
      });

      expect(fetchCount).toBe(2);
    }
  );

  it.each<SuspenseQueryHookFetchPolicy>([
    'cache-first',
    'network-only',
    'no-cache',
    'cache-and-network',
  ])(
    'ensures data is fetched and suspended the correct amount of times in strict mode while using a "%s" fetch policy',
    async (fetchPolicy) => {
      const { query, mocks } = useVariablesQueryCase();

      let fetchCount = 0;

      const link = new ApolloLink((operation) => {
        return new Observable((observer) => {
          fetchCount++;

          const mock = mocks.find(({ request }) =>
            equal(request.variables, operation.variables)
          );

          if (!mock) {
            throw new Error('Could not find mock for operation');
          }

          observer.next(mock.result);
          observer.complete();
        });
      });

      const { result, renders } = renderSuspenseHook(
        ({ id }) => useSuspenseQuery(query, { fetchPolicy, variables: { id } }),
        { strictMode: true, link, initialProps: { id: '1' } }
      );

      await waitFor(() => {
        expect(result.current.data).toEqual(mocks[0].result.data);
      });

      expect(fetchCount).toBe(1);

      // React double invokes the render function in strict mode so the suspense
      // fallback is rendered twice before the promise is resolved
      // https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects
      expect(renders.suspenseCount).toBe(2);
    }
  );

  it.each<SuspenseQueryHookFetchPolicy>([
    'cache-first',
    'network-only',
    'cache-and-network',
  ])(
    'responds to cache updates in strict mode while using a "%s" fetch policy',
    async (fetchPolicy) => {
      const { query, mocks } = useSimpleQueryCase();

      const client = new ApolloClient({
        cache: new InMemoryCache(),
        link: new MockLink(mocks),
      });

      const { result } = renderSuspenseHook(
        () => useSuspenseQuery(query, { fetchPolicy }),
        { strictMode: true, client }
      );

      await waitFor(() => {
        expect(result.current.data).toEqual(mocks[0].result.data);
      });

      client.writeQuery({
        query,
        data: { greeting: 'Updated hello' },
      });

      await waitFor(() => {
        expect(result.current).toMatchObject({
          data: { greeting: 'Updated hello' },
          networkStatus: NetworkStatus.ready,
          error: undefined,
        });
      });
    }
  );

  // https://github.com/apollographql/apollo-client/issues/10478
  it('responds to cache updates when data is already in the cache while using a cache-first fetch policy', async () => {
    const { query, mocks } = useSimpleQueryCase();

    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: new MockLink(mocks),
    });

    client.writeQuery({
      query,
      data: { greeting: 'Hello from cache' },
    });

    const { result } = renderSuspenseHook(
      () => useSuspenseQuery(query, { fetchPolicy: 'cache-first' }),
      { client }
    );

    expect(result.current.data).toEqual({ greeting: 'Hello from cache' });

    // Allow time for the subscription in the hook to set itself up since it is
    // wrapped in a setTimeout (to handle Strict mode bugs). Without this
    // `wait`, `subscribe` isn't called until after our test updates the cache
    // via `writeQuery`, which then emits the most recent result, which is the
    // updated value.
    await wait(0);

    client.writeQuery({
      query,
      data: { greeting: 'Updated hello' },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { greeting: 'Updated hello' },
        error: undefined,
      });
    });
  });

  it('uses the default fetch policy from the client when none provided in options', async () => {
    const { query, mocks } = useSimpleQueryCase();

    const cache = new InMemoryCache();

    const client = new ApolloClient({
      cache,
      link: new MockLink(mocks),
      defaultOptions: {
        watchQuery: {
          fetchPolicy: 'network-only',
        },
      },
    });

    client.writeQuery({ query, data: { greeting: 'hello from cache' } });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query),
      { client }
    );

    await waitFor(() => {
      expect(result.current.data).toEqual(mocks[0].result.data);
    });

    expect(renders.count).toBe(2);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('uses default variables from the client when none provided in options', async () => {
    const { query, mocks } = useVariablesQueryCase();

    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: new MockLink(mocks),
      defaultOptions: {
        watchQuery: {
          variables: { id: '2' },
        },
      },
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query),
      { client }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.frames).toMatchObject([
      {
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('uses default variables from the client when none provided in options in strict mode', async () => {
    const { query, mocks } = useVariablesQueryCase();

    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: new MockLink(mocks),
      defaultOptions: {
        watchQuery: {
          variables: { id: '2' },
        },
      },
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query),
      { strictMode: true, client }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    // React double invokes the render function in strict mode so we expect 2
    // frames to be rendered here.
    expect(renders.frames).toMatchObject([
      {
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('merges global default variables with local variables', async () => {
    const query = gql`
      query MergedVariablesQuery {
        vars
      }
    `;

    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: new ApolloLink((operation) => {
        return new Observable((observer) => {
          observer.next({ data: { vars: operation.variables } });
          observer.complete();
        });
      }),
      defaultOptions: {
        watchQuery: {
          variables: { source: 'global', globalOnlyVar: true },
        },
      },
    });

    const { result, rerender, renders } = renderSuspenseHook(
      ({ source }) =>
        useSuspenseQuery(query, {
          fetchPolicy: 'network-only',
          variables: { source, localOnlyVar: true },
        }),
      { client, initialProps: { source: 'local' } }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          vars: { source: 'local', globalOnlyVar: true, localOnlyVar: true },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    rerender({ source: 'rerender' });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          vars: { source: 'rerender', globalOnlyVar: true, localOnlyVar: true },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.frames).toMatchObject([
      {
        data: {
          vars: { source: 'local', globalOnlyVar: true, localOnlyVar: true },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: {
          vars: { source: 'rerender', globalOnlyVar: true, localOnlyVar: true },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('can unset a globally defined variable', async () => {
    const query = gql`
      query MergedVariablesQuery {
        vars
      }
    `;

    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: new ApolloLink((operation) => {
        return new Observable((observer) => {
          observer.next({ data: { vars: operation.variables } });
          observer.complete();
        });
      }),
      defaultOptions: {
        watchQuery: {
          variables: { source: 'global', globalOnlyVar: true },
        },
      },
    });

    const { result, renders } = renderSuspenseHook(
      () =>
        useSuspenseQuery(query, {
          variables: { source: 'local', globalOnlyVar: undefined },
        }),
      { client }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { vars: { source: 'local' } },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    // Check to make sure the property itself is not defined, not just set to
    // undefined. Unfortunately this is not caught by toMatchObject as
    // toMatchObject only checks a if the subset of options are equal, not if
    // they have strictly the same keys and values.
    expect(result.current.data.vars).not.toHaveProperty('globalOnlyVar');

    expect(renders.frames).toMatchObject([
      {
        data: { vars: { source: 'local' } },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('passes context to the link', async () => {
    const query = gql`
      query ContextQuery {
        context
      }
    `;

    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: new ApolloLink((operation) => {
        return new Observable((observer) => {
          const { valueA, valueB } = operation.getContext();

          observer.next({ data: { context: { valueA, valueB } } });
          observer.complete();
        });
      }),
    });

    const { result } = renderSuspenseHook(
      () =>
        useSuspenseQuery(query, {
          context: { valueA: 'A', valueB: 'B' },
        }),
      { client }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { context: { valueA: 'A', valueB: 'B' } },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });
  });

  it('throws network errors by default', async () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();

    const { query, mocks } = useErrorCase({
      networkError: new Error('Could not fetch'),
    });

    const { renders } = renderSuspenseHook(() => useSuspenseQuery(query), {
      mocks,
    });

    await waitFor(() => expect(renders.errorCount).toBe(1));

    expect(renders.errors.length).toBe(1);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toEqual([]);

    const [error] = renders.errors as ApolloError[];

    expect(error).toBeInstanceOf(ApolloError);
    expect(error.networkError).toEqual(new Error('Could not fetch'));
    expect(error.graphQLErrors).toEqual([]);

    consoleSpy.mockRestore();
  });

  it('throws graphql errors by default', async () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();

    const { query, mocks } = useErrorCase({
      graphQLErrors: [new GraphQLError('`id` should not be null')],
    });

    const { renders } = renderSuspenseHook(() => useSuspenseQuery(query), {
      mocks,
    });

    await waitFor(() => expect(renders.errorCount).toBe(1));

    expect(renders.errors.length).toBe(1);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toEqual([]);

    const [error] = renders.errors as ApolloError[];

    expect(error).toBeInstanceOf(ApolloError);
    expect(error.networkError).toBeNull();
    expect(error.graphQLErrors).toEqual([
      new GraphQLError('`id` should not be null'),
    ]);

    consoleSpy.mockRestore();
  });

  it('throws errors when suspensePolicy is set to initial', async () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();

    const { query, mocks } = useErrorCase({
      networkError: new Error('Could not fetch'),
    });

    const { renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { suspensePolicy: 'initial' }),
      { mocks }
    );

    await waitFor(() => expect(renders.errorCount).toBe(1));

    expect(renders.errors.length).toBe(1);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toEqual([]);

    const [error] = renders.errors as ApolloError[];

    expect(error).toBeInstanceOf(ApolloError);
    expect(error.networkError).toEqual(new Error('Could not fetch'));
    expect(error.graphQLErrors).toEqual([]);

    consoleSpy.mockRestore();
  });

  it('tears down subscription when throwing an error', async () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();

    const { query, mocks } = useErrorCase({
      networkError: new Error('Could not fetch'),
    });

    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: new MockLink(mocks),
    });

    const { renders } = renderSuspenseHook(() => useSuspenseQuery(query), {
      client,
    });

    await waitFor(() => expect(renders.errorCount).toBe(1));

    expect(client.getObservableQueries().size).toBe(0);

    consoleSpy.mockRestore();
  });

  it('tears down subscription when throwing an error on refetch', async () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();

    const query = gql`
      query UserQuery($id: String!) {
        user(id: $id) {
          id
          name
        }
      }
    `;

    const mocks = [
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel' } },
        },
      },
      {
        request: { query, variables: { id: '1' } },
        result: {
          errors: [new GraphQLError('Something went wrong')],
        },
      },
    ];

    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: new MockLink(mocks),
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { variables: { id: '1' } }),
      { client }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    act(() => {
      result.current.refetch();
    });

    await waitFor(() => expect(renders.errorCount).toBe(1));

    expect(client.getObservableQueries().size).toBe(0);

    consoleSpy.mockRestore();
  });

  it('tears down subscription when throwing an error on refetch when suspensePolicy is "initial"', async () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();

    const query = gql`
      query UserQuery($id: String!) {
        user(id: $id) {
          id
          name
        }
      }
    `;

    const mocks = [
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel' } },
        },
      },
      {
        request: { query, variables: { id: '1' } },
        result: {
          errors: [new GraphQLError('Something went wrong')],
        },
      },
    ];

    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: new MockLink(mocks),
    });

    const { result, renders } = renderSuspenseHook(
      () =>
        useSuspenseQuery(query, {
          suspensePolicy: 'initial',
          variables: { id: '1' },
        }),
      { client }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    act(() => {
      result.current.refetch();
    });

    await waitFor(() => expect(renders.errorCount).toBe(1));

    expect(client.getObservableQueries().size).toBe(0);

    consoleSpy.mockRestore();
  });

  it('throws network errors when errorPolicy is set to "none"', async () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();

    const { query, mocks } = useErrorCase({
      networkError: new Error('Could not fetch'),
    });

    const { renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { errorPolicy: 'none' }),
      { mocks }
    );

    await waitFor(() => expect(renders.errorCount).toBe(1));

    expect(renders.errors.length).toBe(1);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toEqual([]);

    const [error] = renders.errors as ApolloError[];

    expect(error).toBeInstanceOf(ApolloError);
    expect(error.networkError).toEqual(new Error('Could not fetch'));
    expect(error.graphQLErrors).toEqual([]);

    consoleSpy.mockRestore();
  });

  it('throws graphql errors when errorPolicy is set to "none"', async () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();

    const { query, mocks } = useErrorCase({
      graphQLErrors: [new GraphQLError('`id` should not be null')],
    });

    const { renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { errorPolicy: 'none' }),
      { mocks }
    );

    await waitFor(() => expect(renders.errorCount).toBe(1));

    expect(renders.errors.length).toBe(1);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toEqual([]);

    const [error] = renders.errors as ApolloError[];

    expect(error).toBeInstanceOf(ApolloError);
    expect(error.networkError).toBeNull();
    expect(error.graphQLErrors).toEqual([
      new GraphQLError('`id` should not be null'),
    ]);

    consoleSpy.mockRestore();
  });

  it('handles multiple graphql errors when errorPolicy is set to "none"', async () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();

    const graphQLErrors = [
      new GraphQLError('Fool me once'),
      new GraphQLError('Fool me twice'),
    ];

    const { query, mocks } = useErrorCase({ graphQLErrors });

    const { renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { errorPolicy: 'none' }),
      { mocks }
    );

    await waitFor(() => expect(renders.errorCount).toBe(1));

    expect(renders.errors.length).toBe(1);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toEqual([]);

    const [error] = renders.errors as ApolloError[];

    expect(error).toBeInstanceOf(ApolloError);
    expect(error!.networkError).toBeNull();
    expect(error!.graphQLErrors).toEqual(graphQLErrors);

    consoleSpy.mockRestore();
  });

  it('throws network errors when errorPolicy is set to "ignore"', async () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
    const networkError = new Error('Could not fetch');

    const { query, mocks } = useErrorCase({ networkError });

    const { renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { errorPolicy: 'ignore' }),
      { mocks }
    );

    await waitFor(() => {
      expect(renders.errorCount).toBe(1);
    });

    expect(renders.errors.length).toBe(1);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toEqual([]);

    const [error] = renders.errors as ApolloError[];

    expect(error).toBeInstanceOf(ApolloError);
    expect(error!.networkError).toEqual(networkError);
    expect(error!.graphQLErrors).toEqual([]);

    consoleSpy.mockRestore();
  });

  it('does not throw or return graphql errors when errorPolicy is set to "ignore"', async () => {
    const { query, mocks } = useErrorCase({
      graphQLErrors: [new GraphQLError('`id` should not be null')],
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { errorPolicy: 'ignore' }),
      { mocks }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: undefined,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.errorCount).toBe(0);
    expect(renders.errors).toEqual([]);
    expect(renders.count).toBe(2);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      { data: undefined, networkStatus: NetworkStatus.ready, error: undefined },
    ]);
  });

  it('returns partial data results and discards GraphQL errors when errorPolicy is set to "ignore"', async () => {
    const { query, mocks } = useErrorCase({
      data: { currentUser: { id: '1', name: null } },
      graphQLErrors: [new GraphQLError('`name` could not be found')],
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { errorPolicy: 'ignore' }),
      { mocks }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { currentUser: { id: '1', name: null } },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.frames).toMatchObject([
      {
        data: { currentUser: { id: '1', name: null } },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('discards multiple graphql errors when errorPolicy is set to "ignore"', async () => {
    const { query, mocks } = useErrorCase({
      graphQLErrors: [
        new GraphQLError('Fool me once'),
        new GraphQLError('Fool me twice'),
      ],
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { errorPolicy: 'ignore' }),
      { mocks }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: undefined,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.frames).toMatchObject([
      { data: undefined, networkStatus: NetworkStatus.ready, error: undefined },
    ]);
  });

  it('throws network errors when errorPolicy is set to "all"', async () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();

    const networkError = new Error('Could not fetch');

    const { query, mocks } = useErrorCase({ networkError });

    const { renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { errorPolicy: 'all' }),
      { mocks }
    );

    await waitFor(() => {
      expect(renders.errorCount).toBe(1);
    });

    expect(renders.errors.length).toBe(1);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toEqual([]);

    const [error] = renders.errors as ApolloError[];

    expect(error).toBeInstanceOf(ApolloError);
    expect(error!.networkError).toEqual(networkError);
    expect(error!.graphQLErrors).toEqual([]);

    consoleSpy.mockRestore();
  });

  it('does not throw and returns graphql errors when errorPolicy is set to "all"', async () => {
    const graphQLError = new GraphQLError('`id` should not be null');

    const { query, mocks } = useErrorCase({ graphQLErrors: [graphQLError] });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { errorPolicy: 'all' }),
      { mocks }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: undefined,
        error: new ApolloError({ graphQLErrors: [graphQLError] }),
      });
    });

    expect(renders.errorCount).toBe(0);
    expect(renders.errors).toEqual([]);
    expect(renders.count).toBe(2);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        data: undefined,
        networkStatus: NetworkStatus.ready,
        error: new ApolloError({ graphQLErrors: [graphQLError] }),
      },
    ]);

    const { error } = result.current;

    expect(error).toBeInstanceOf(ApolloError);
    expect(error!.networkError).toBeNull();
    expect(error!.graphQLErrors).toEqual([graphQLError]);
  });

  it('handles multiple graphql errors when errorPolicy is set to "all"', async () => {
    const graphQLErrors = [
      new GraphQLError('Fool me once'),
      new GraphQLError('Fool me twice'),
    ];

    const { query, mocks } = useErrorCase({ graphQLErrors });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { errorPolicy: 'all' }),
      { mocks }
    );

    const expectedError = new ApolloError({ graphQLErrors });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: undefined,
        error: expectedError,
      });
    });

    expect(renders.errorCount).toBe(0);
    expect(renders.errors).toEqual([]);
    expect(renders.count).toBe(2);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        data: undefined,
        networkStatus: NetworkStatus.ready,
        error: expectedError,
      },
    ]);

    const { error } = result.current;

    expect(error).toBeInstanceOf(ApolloError);
    expect(error!.networkError).toBeNull();
    expect(error!.graphQLErrors).toEqual(graphQLErrors);
  });

  it('returns partial data and keeps errors when errorPolicy is set to "all"', async () => {
    const graphQLError = new GraphQLError('`name` could not be found');

    const { query, mocks } = useErrorCase({
      data: { currentUser: { id: '1', name: null } },
      graphQLErrors: [graphQLError],
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { errorPolicy: 'all' }),
      { mocks }
    );

    const expectedError = new ApolloError({ graphQLErrors: [graphQLError] });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { currentUser: { id: '1', name: null } },
        networkStatus: NetworkStatus.ready,
        error: expectedError,
      });
    });

    expect(renders.frames).toMatchObject([
      {
        data: { currentUser: { id: '1', name: null } },
        networkStatus: NetworkStatus.ready,
        error: expectedError,
      },
    ]);
  });

  it('persists errors between rerenders when errorPolicy is set to "all"', async () => {
    const graphQLError = new GraphQLError('`name` could not be found');

    const { query, mocks } = useErrorCase({
      graphQLErrors: [graphQLError],
    });

    const { result, rerender } = renderSuspenseHook(
      () => useSuspenseQuery(query, { errorPolicy: 'all' }),
      { mocks }
    );

    const expectedError = new ApolloError({ graphQLErrors: [graphQLError] });

    await waitFor(() => {
      expect(result.current.error).toEqual(expectedError);
    });

    rerender();

    expect(result.current.error).toEqual(expectedError);
  });

  it('clears errors when changing variables and errorPolicy is set to "all"', async () => {
    const query = gql`
      query UserQuery($id: String!) {
        user(id: $id) {
          id
          name
        }
      }
    `;

    const graphQLErrors = [new GraphQLError('Could not fetch user 1')];

    const mocks = [
      {
        request: { query, variables: { id: '1' } },
        result: {
          errors: graphQLErrors,
        },
      },
      {
        request: { query, variables: { id: '2' } },
        result: {
          data: { user: { id: '2', name: 'Captain Marvel' } },
        },
      },
    ];

    const { result, renders, rerender } = renderSuspenseHook(
      ({ id }) =>
        useSuspenseQuery(query, { errorPolicy: 'all', variables: { id } }),
      { mocks, initialProps: { id: '1' } }
    );

    const expectedError = new ApolloError({ graphQLErrors });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: undefined,
        networkStatus: NetworkStatus.ready,
        error: expectedError,
      });
    });

    rerender({ id: '2' });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(4);
    expect(renders.errorCount).toBe(0);
    expect(renders.errors).toEqual([]);
    expect(renders.suspenseCount).toBe(2);
    expect(renders.frames).toMatchObject([
      {
        data: undefined,
        networkStatus: NetworkStatus.ready,
        error: expectedError,
      },
      {
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('clears errors when changing variables and errorPolicy is set to "all" with an "initial" suspensePolicy', async () => {
    const query = gql`
      query UserQuery($id: String!) {
        user(id: $id) {
          id
          name
        }
      }
    `;

    const graphQLErrors = [new GraphQLError('Could not fetch user 1')];

    const mocks = [
      {
        request: { query, variables: { id: '1' } },
        result: {
          errors: graphQLErrors,
        },
      },
      {
        request: { query, variables: { id: '2' } },
        result: {
          data: { user: { id: '2', name: 'Captain Marvel' } },
        },
      },
    ];

    const { result, renders, rerender } = renderSuspenseHook(
      ({ id }) =>
        useSuspenseQuery(query, {
          errorPolicy: 'all',
          suspensePolicy: 'initial',
          variables: { id },
        }),
      { mocks, initialProps: { id: '1' } }
    );

    const expectedError = new ApolloError({ graphQLErrors });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: undefined,
        networkStatus: NetworkStatus.ready,
        error: expectedError,
      });
    });

    rerender({ id: '2' });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(4);
    expect(renders.errorCount).toBe(0);
    expect(renders.errors).toEqual([]);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        data: undefined,
        networkStatus: NetworkStatus.ready,
        error: expectedError,
      },
      {
        data: undefined,
        networkStatus: NetworkStatus.setVariables,
        error: undefined,
      },
      {
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('re-suspends when calling `refetch`', async () => {
    const query = gql`
      query UserQuery($id: String!) {
        user(id: $id) {
          id
          name
        }
      }
    `;

    const mocks = [
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel' } },
        },
      },
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel (updated)' } },
        },
      },
    ];

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { variables: { id: '1' } }),
      { mocks, initialProps: { id: '1' } }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    act(() => {
      result.current.refetch();
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(4);
    expect(renders.suspenseCount).toBe(2);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('re-suspends when calling `refetch` with new variables', async () => {
    const query = gql`
      query UserQuery($id: String!) {
        user(id: $id) {
          id
          name
        }
      }
    `;

    const mocks = [
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel' } },
        },
      },
      {
        request: { query, variables: { id: '2' } },
        result: {
          data: { user: { id: '2', name: 'Captain America' } },
        },
      },
    ];

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { variables: { id: '1' } }),
      { mocks }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    act(() => {
      result.current.refetch({ id: '2' });
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });
    expect(renders.count).toBe(4);
    expect(renders.suspenseCount).toBe(2);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('re-suspends multiple times when calling `refetch` multiple times', async () => {
    const query = gql`
      query UserQuery($id: String!) {
        user(id: $id) {
          id
          name
        }
      }
    `;

    const mocks = [
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel' } },
        },
      },
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel (updated)' } },
        },
      },
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel (updated again)' } },
        },
      },
    ];

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { variables: { id: '1' } }),
      { mocks, initialProps: { id: '1' } }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        error: undefined,
      });
    });

    act(() => {
      result.current.refetch();
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    act(() => {
      result.current.refetch();
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[2].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(6);
    expect(renders.suspenseCount).toBe(3);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[2].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('does not suspend and returns previous data when calling `refetch` and using an "initial" suspensePolicy', async () => {
    const query = gql`
      query UserQuery($id: String!) {
        user(id: $id) {
          id
          name
        }
      }
    `;

    const mocks = [
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel' } },
        },
      },
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel (updated)' } },
        },
      },
    ];

    const { result, renders } = renderSuspenseHook(
      () =>
        useSuspenseQuery(query, {
          suspensePolicy: 'initial',
          variables: { id: '1' },
        }),
      { mocks }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    act(() => {
      result.current.refetch();
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(4);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.refetch,
        error: undefined,
      },
      {
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('throws errors when errors are returned after calling `refetch`', async () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();

    const query = gql`
      query UserQuery($id: String!) {
        user(id: $id) {
          id
          name
        }
      }
    `;

    const mocks = [
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel' } },
        },
      },
      {
        request: { query, variables: { id: '1' } },
        result: {
          errors: [new GraphQLError('Something went wrong')],
        },
      },
    ];

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { variables: { id: '1' } }),
      { mocks }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    act(() => {
      result.current.refetch();
    });

    await waitFor(() => {
      expect(renders.errorCount).toBe(1);
    });

    expect(renders.errors).toEqual([
      new ApolloError({
        graphQLErrors: [new GraphQLError('Something went wrong')],
      }),
    ]);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);

    consoleSpy.mockRestore();
  });

  it('throws errors when errors are returned after calling `refetch` with suspensePolicy set to "initial"', async () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();

    const query = gql`
      query UserQuery($id: String!) {
        user(id: $id) {
          id
          name
        }
      }
    `;

    const mocks = [
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel' } },
        },
      },
      {
        request: { query, variables: { id: '1' } },
        result: {
          errors: [new GraphQLError('Something went wrong')],
        },
      },
    ];

    const { result, renders } = renderSuspenseHook(
      () =>
        useSuspenseQuery(query, {
          suspensePolicy: 'initial',
          variables: { id: '1' },
        }),
      { mocks }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    act(() => {
      result.current.refetch();
    });

    await waitFor(() => {
      expect(renders.errorCount).toBe(1);
    });

    expect(renders.errors).toEqual([
      new ApolloError({
        graphQLErrors: [new GraphQLError('Something went wrong')],
      }),
    ]);

    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.refetch,
        error: undefined,
      },
    ]);

    consoleSpy.mockRestore();
  });

  it('ignores errors returned after calling `refetch` when errorPolicy is set to "ignore"', async () => {
    const query = gql`
      query UserQuery($id: String!) {
        user(id: $id) {
          id
          name
        }
      }
    `;

    const mocks = [
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel' } },
        },
      },
      {
        request: { query, variables: { id: '1' } },
        result: {
          errors: [new GraphQLError('Something went wrong')],
        },
      },
    ];

    const { result, renders } = renderSuspenseHook(
      () =>
        useSuspenseQuery(query, {
          errorPolicy: 'ignore',
          variables: { id: '1' },
        }),
      { mocks }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    await act(async () => {
      await result.current.refetch();
    });

    expect(renders.errorCount).toBe(0);
    expect(renders.errors).toEqual([]);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('returns errors after calling `refetch` when errorPolicy is set to "all"', async () => {
    const query = gql`
      query UserQuery($id: String!) {
        user(id: $id) {
          id
          name
        }
      }
    `;

    const mocks = [
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel' } },
        },
      },
      {
        request: { query, variables: { id: '1' } },
        result: {
          errors: [new GraphQLError('Something went wrong')],
        },
      },
    ];

    const { result, renders } = renderSuspenseHook(
      () =>
        useSuspenseQuery(query, {
          errorPolicy: 'all',
          variables: { id: '1' },
        }),
      { mocks }
    );

    const expectedError = new ApolloError({
      graphQLErrors: [new GraphQLError('Something went wrong')],
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    act(() => {
      result.current.refetch();
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: expectedError,
      });
    });

    expect(renders.errorCount).toBe(0);
    expect(renders.errors).toEqual([]);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: expectedError,
      },
    ]);
  });

  it('handles partial data results after calling `refetch` when errorPolicy is set to "all"', async () => {
    const query = gql`
      query UserQuery($id: String!) {
        user(id: $id) {
          id
          name
        }
      }
    `;

    const mocks = [
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel' } },
        },
      },
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: null } },
          errors: [new GraphQLError('Something went wrong')],
        },
      },
    ];

    const { result, renders } = renderSuspenseHook(
      () =>
        useSuspenseQuery(query, {
          errorPolicy: 'all',
          variables: { id: '1' },
        }),
      { mocks }
    );

    const expectedError = new ApolloError({
      graphQLErrors: [new GraphQLError('Something went wrong')],
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        error: undefined,
      });
    });

    act(() => {
      result.current.refetch();
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: mocks[1].result.data,
        networkStatus: NetworkStatus.ready,
        error: expectedError,
      });
    });

    expect(renders.errorCount).toBe(0);
    expect(renders.errors).toEqual([]);
    expect(renders.frames).toMatchObject([
      {
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: mocks[1].result.data,
        networkStatus: NetworkStatus.ready,
        error: expectedError,
      },
    ]);
  });

  it('re-suspends when calling `fetchMore` with different variables', async () => {
    const { data, query, link } = usePaginatedCase();

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { variables: { limit: 2 } }),
      { link }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { letters: data.slice(0, 2) },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    act(() => {
      result.current.fetchMore({ variables: { offset: 2 } });
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { letters: data.slice(2, 4) },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(4);
    expect(renders.suspenseCount).toBe(2);
    expect(renders.frames).toMatchObject([
      {
        data: { letters: data.slice(0, 2) },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: { letters: data.slice(2, 4) },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('does not re-suspend when calling `fetchMore` with different variables while using an "initial" suspense policy', async () => {
    const { data, query, link } = usePaginatedCase();

    const { result, renders } = renderSuspenseHook(
      () =>
        useSuspenseQuery(query, {
          suspensePolicy: 'initial',
          variables: { limit: 2 },
        }),
      { link }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { letters: data.slice(0, 2) },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    act(() => {
      result.current.fetchMore({ variables: { offset: 2 } });
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { letters: data.slice(2, 4) },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(4);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        data: { letters: data.slice(0, 2) },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: { letters: data.slice(0, 2) },
        networkStatus: NetworkStatus.fetchMore,
        error: undefined,
      },
      {
        data: { letters: data.slice(2, 4) },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('properly uses `updateQuery` when calling `fetchMore`', async () => {
    const { data, query, link } = usePaginatedCase();

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { variables: { limit: 2 } }),
      { link }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { letters: data.slice(0, 2) },
        error: undefined,
      });
    });

    act(() => {
      result.current.fetchMore({
        variables: { offset: 2 },
        updateQuery: (prev, { fetchMoreResult }) => ({
          letters: prev.letters.concat(fetchMoreResult.letters),
        }),
      });
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { letters: data.slice(0, 4) },
        error: undefined,
      });
    });

    expect(renders.frames).toMatchObject([
      {
        data: { letters: data.slice(0, 2) },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: { letters: data.slice(0, 4) },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('properly uses cache field policies when calling `fetchMore` without `updateQuery`', async () => {
    const { data, query, link } = usePaginatedCase();

    const cache = new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            letters: concatPagination(),
          },
        },
      },
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { variables: { limit: 2 } }),
      { cache, link }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { letters: data.slice(0, 2) },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    act(() => {
      result.current.fetchMore({ variables: { offset: 2 } });
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { letters: data.slice(0, 4) },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.frames).toMatchObject([
      {
        data: { letters: data.slice(0, 2) },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: { letters: data.slice(0, 4) },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  // Jerel: I cannot figure out how to properly show the functionality of
  // nextFetchPolicy. Executing refetch/fetchMore/etc will force set the
  // fetchPolicy to something that will execute a network request, thereby
  // negating the value. The default behavior when changing variables is to
  // set the fetchPolicy back to the initial fetch policy, which also negates
  // the next fetch policy.
  //
  // Perhaps this is a sign that we should consider removing support for
  // nextFetchPolicy in the context of the suspense hook.
  it.failing('applies nextFetchPolicy after initial suspense', async () => {
    const { query, mocks } = useVariablesQueryCase();

    const cache = new InMemoryCache();

    // network-only should bypass this cached result and suspend the component
    cache.writeQuery({
      query,
      data: { character: { id: '1', name: 'Cached Hulk' } },
      variables: { id: '1' },
    });

    // cache-first should read from this result on the rerender
    cache.writeQuery({
      query,
      data: { character: { id: '2', name: 'Cached Black Widow' } },
      variables: { id: '2' },
    });

    const { result, renders, rerender } = renderSuspenseHook(
      ({ id }) =>
        useSuspenseQuery(query, {
          fetchPolicy: 'network-only',
          // There is no way to trigger a followup query using nextFetchPolicy
          // when this is a string vs a function. When changing variables,
          // the `fetchPolicy` is reset back to `initialFetchPolicy` before the
          // request is sent, negating the `nextFetchPolicy`. Using `refetch` or
          // `fetchMore` sets the `fetchPolicy` to `network-only`, which negates
          // the value. Using a function seems to be the only way to force a
          // `nextFetchPolicy` without resorting to lower-level methods
          // (i.e. `observable.reobserve`)
          nextFetchPolicy: () => 'cache-first',
          variables: { id },
        }),
      { cache, mocks, initialProps: { id: '1' } }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    rerender({ id: '2' });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { character: { id: '2', name: 'Cached Black Widow' } },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.suspenseCount).toBe(1);
  });

  it('honors refetchWritePolicy set to "overwrite"', async () => {
    const query: TypedDocumentNode<
      { primes: number[] },
      { min: number; max: number }
    > = gql`
      query GetPrimes($min: number, $max: number) {
        primes(min: $min, max: $max)
      }
    `;

    const mocks = [
      {
        request: { query, variables: { min: 0, max: 12 } },
        result: { data: { primes: [2, 3, 5, 7, 11] } },
      },
      {
        request: { query, variables: { min: 12, max: 30 } },
        result: { data: { primes: [13, 17, 19, 23, 29] } },
        delay: 10,
      },
    ];

    const mergeParams: [number[] | undefined, number[]][] = [];
    const cache = new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            primes: {
              keyArgs: false,
              merge(existing: number[] | undefined, incoming: number[]) {
                mergeParams.push([existing, incoming]);
                return existing ? existing.concat(incoming) : incoming;
              },
            },
          },
        },
      },
    });

    const { result } = renderSuspenseHook(
      () =>
        useSuspenseQuery(query, {
          variables: { min: 0, max: 12 },
          refetchWritePolicy: 'overwrite',
        }),
      { cache, mocks }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]);

    act(() => {
      result.current.refetch({ min: 12, max: 30 });
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(mergeParams).toEqual([
      [undefined, [2, 3, 5, 7, 11]],
      [undefined, [13, 17, 19, 23, 29]],
    ]);
  });

  it('honors refetchWritePolicy set to "merge"', async () => {
    const query: TypedDocumentNode<
      { primes: number[] },
      { min: number; max: number }
    > = gql`
      query GetPrimes($min: number, $max: number) {
        primes(min: $min, max: $max)
      }
    `;

    const mocks = [
      {
        request: { query, variables: { min: 0, max: 12 } },
        result: { data: { primes: [2, 3, 5, 7, 11] } },
      },
      {
        request: { query, variables: { min: 12, max: 30 } },
        result: { data: { primes: [13, 17, 19, 23, 29] } },
        delay: 10,
      },
    ];

    const mergeParams: [number[] | undefined, number[]][] = [];
    const cache = new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            primes: {
              keyArgs: false,
              merge(existing: number[] | undefined, incoming: number[]) {
                mergeParams.push([existing, incoming]);
                return existing ? existing.concat(incoming) : incoming;
              },
            },
          },
        },
      },
    });

    const { result } = renderSuspenseHook(
      () =>
        useSuspenseQuery(query, {
          variables: { min: 0, max: 12 },
          refetchWritePolicy: 'merge',
        }),
      { cache, mocks }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]);

    act(() => {
      result.current.refetch({ min: 12, max: 30 });
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { primes: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29] },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(mergeParams).toEqual([
      [undefined, [2, 3, 5, 7, 11]],
      [
        [2, 3, 5, 7, 11],
        [13, 17, 19, 23, 29],
      ],
    ]);
  });

  it('defaults refetchWritePolicy to "overwrite"', async () => {
    const query: TypedDocumentNode<
      { primes: number[] },
      { min: number; max: number }
    > = gql`
      query GetPrimes($min: number, $max: number) {
        primes(min: $min, max: $max)
      }
    `;

    const mocks = [
      {
        request: { query, variables: { min: 0, max: 12 } },
        result: { data: { primes: [2, 3, 5, 7, 11] } },
      },
      {
        request: { query, variables: { min: 12, max: 30 } },
        result: { data: { primes: [13, 17, 19, 23, 29] } },
        delay: 10,
      },
    ];

    const mergeParams: [number[] | undefined, number[]][] = [];
    const cache = new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            primes: {
              keyArgs: false,
              merge(existing: number[] | undefined, incoming: number[]) {
                mergeParams.push([existing, incoming]);
                return existing ? existing.concat(incoming) : incoming;
              },
            },
          },
        },
      },
    });

    const { result } = renderSuspenseHook(
      () => useSuspenseQuery(query, { variables: { min: 0, max: 12 } }),
      { cache, mocks }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]);

    act(() => {
      result.current.refetch({ min: 12, max: 30 });
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(mergeParams).toEqual([
      [undefined, [2, 3, 5, 7, 11]],
      [undefined, [13, 17, 19, 23, 29]],
    ]);
  });

  it('does not oversubscribe when suspending multiple times', async () => {
    const query = gql`
      query UserQuery($id: String!) {
        user(id: $id) {
          id
          name
        }
      }
    `;

    const mocks = [
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel' } },
        },
      },
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel (updated)' } },
        },
      },
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { user: { id: '1', name: 'Captain Marvel (updated again)' } },
        },
      },
    ];

    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: new MockLink(mocks),
    });

    const { result } = renderSuspenseHook(
      () => useSuspenseQuery(query, { variables: { id: '1' } }),
      { client, initialProps: { id: '1' } }
    );

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[0].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    act(() => {
      result.current.refetch();
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[1].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    act(() => {
      result.current.refetch();
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        ...mocks[2].result,
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(client.getObservableQueries().size).toBe(1);
  });

  it('suspends deferred queries until initial chunk loads then streams in data as it loads', async () => {
    const query = gql`
      query {
        greeting {
          message
          ... on Greeting @defer {
            recipient {
              name
            }
          }
        }
      }
    `;

    const link = new MockSubscriptionLink();

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query),
      { link }
    );

    expect(renders.suspenseCount).toBe(1);

    link.simulateResult({
      result: {
        data: { greeting: { message: 'Hello world', __typename: 'Greeting' } },
        hasNext: true,
      },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: { greeting: { message: 'Hello world', __typename: 'Greeting' } },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    link.simulateResult({
      result: {
        incremental: [
          {
            data: {
              recipient: { name: 'Alice', __typename: 'Person' },
              __typename: 'Greeting',
            },
            path: ['greeting'],
          },
        ],
        hasNext: false,
      },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          greeting: {
            __typename: 'Greeting',
            message: 'Hello world',
            recipient: { __typename: 'Person', name: 'Alice' },
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(3);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        data: { greeting: { message: 'Hello world', __typename: 'Greeting' } },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: {
          greeting: {
            __typename: 'Greeting',
            message: 'Hello world',
            recipient: { __typename: 'Person', name: 'Alice' },
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it.each<SuspenseQueryHookFetchPolicy>([
    'cache-first',
    'network-only',
    'no-cache',
    'cache-and-network',
  ])(
    'suspends deferred queries until initial chunk loads then streams in data as it loads when using a "%s" fetch policy',
    async (fetchPolicy) => {
      const query = gql`
        query {
          greeting {
            message
            ... on Greeting @defer {
              recipient {
                name
              }
            }
          }
        }
      `;

      const link = new MockSubscriptionLink();

      const { result, renders } = renderSuspenseHook(
        () => useSuspenseQuery(query, { fetchPolicy }),
        { link }
      );

      expect(renders.suspenseCount).toBe(1);

      link.simulateResult({
        result: {
          data: {
            greeting: { message: 'Hello world', __typename: 'Greeting' },
          },
          hasNext: true,
        },
      });

      await waitFor(() => {
        expect(result.current).toMatchObject({
          data: {
            greeting: { message: 'Hello world', __typename: 'Greeting' },
          },
          networkStatus: NetworkStatus.ready,
          error: undefined,
        });
      });

      link.simulateResult({
        result: {
          incremental: [
            {
              data: {
                recipient: { name: 'Alice', __typename: 'Person' },
                __typename: 'Greeting',
              },
              path: ['greeting'],
            },
          ],
          hasNext: false,
        },
      });

      await waitFor(() => {
        expect(result.current).toMatchObject({
          data: {
            greeting: {
              __typename: 'Greeting',
              message: 'Hello world',
              recipient: { __typename: 'Person', name: 'Alice' },
            },
          },
          networkStatus: NetworkStatus.ready,
          error: undefined,
        });
      });

      expect(renders.count).toBe(3);
      expect(renders.suspenseCount).toBe(1);
      expect(renders.frames).toMatchObject([
        {
          data: {
            greeting: { message: 'Hello world', __typename: 'Greeting' },
          },
          networkStatus: NetworkStatus.ready,
          error: undefined,
        },
        {
          data: {
            greeting: {
              __typename: 'Greeting',
              message: 'Hello world',
              recipient: { __typename: 'Person', name: 'Alice' },
            },
          },
          networkStatus: NetworkStatus.ready,
          error: undefined,
        },
      ]);
    }
  );

  it('does not suspend deferred queries with data in the cache and using a "cache-first" fetch policy', async () => {
    const query = gql`
      query {
        greeting {
          message
          ... on Greeting @defer {
            recipient {
              name
            }
          }
        }
      }
    `;

    const cache = new InMemoryCache();

    cache.writeQuery({
      query,
      data: {
        greeting: {
          __typename: 'Greeting',
          message: 'Hello world',
          recipient: { __typename: 'Person', name: 'Alice' },
        },
      },
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { fetchPolicy: 'cache-first' }),
      { cache }
    );

    expect(result.current).toMatchObject({
      data: {
        greeting: {
          message: 'Hello world',
          __typename: 'Greeting',
          recipient: { __typename: 'Person', name: 'Alice' },
        },
      },
      networkStatus: NetworkStatus.ready,
      error: undefined,
    });

    expect(renders.suspenseCount).toBe(0);
    expect(renders.frames).toMatchObject([
      {
        data: {
          greeting: {
            __typename: 'Greeting',
            message: 'Hello world',
            recipient: { __typename: 'Person', name: 'Alice' },
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('does not suspend deferred queries with partial data in the cache and using a "cache-first" fetch policy with `returnPartialData`', async () => {
    const query = gql`
      query {
        greeting {
          message
          ... on Greeting @defer {
            recipient {
              name
            }
          }
        }
      }
    `;

    const link = new MockSubscriptionLink();
    const cache = new InMemoryCache();

    // We are intentionally writing partial data to the cache. Supress console
    // warnings to avoid unnecessary noise in the test.
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
    cache.writeQuery({
      query,
      data: {
        greeting: {
          __typename: 'Greeting',
          recipient: { __typename: 'Person', name: 'Cached Alice' },
        },
      },
    });
    consoleSpy.mockRestore();

    const { result, renders } = renderSuspenseHook(
      () =>
        useSuspenseQuery(query, {
          fetchPolicy: 'cache-first',
          returnPartialData: true,
        }),
      { cache, link }
    );

    expect(result.current).toMatchObject({
      data: {
        greeting: {
          __typename: 'Greeting',
          recipient: { __typename: 'Person', name: 'Cached Alice' },
        },
      },
      networkStatus: NetworkStatus.loading,
      error: undefined,
    });

    link.simulateResult({
      result: {
        data: { greeting: { message: 'Hello world', __typename: 'Greeting' } },
        hasNext: true,
      },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          greeting: {
            __typename: 'Greeting',
            message: 'Hello world',
            recipient: { __typename: 'Person', name: 'Cached Alice' },
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    link.simulateResult({
      result: {
        incremental: [
          {
            data: {
              __typename: 'Greeting',
              recipient: { name: 'Alice', __typename: 'Person' },
            },
            path: ['greeting'],
          },
        ],
        hasNext: false,
      },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          greeting: {
            __typename: 'Greeting',
            message: 'Hello world',
            recipient: { __typename: 'Person', name: 'Alice' },
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(3);
    expect(renders.suspenseCount).toBe(0);
    expect(renders.frames).toMatchObject([
      {
        data: {
          greeting: {
            __typename: 'Greeting',
            recipient: { __typename: 'Person', name: 'Cached Alice' },
          },
        },
        networkStatus: NetworkStatus.loading,
        error: undefined,
      },
      {
        data: {
          greeting: {
            __typename: 'Greeting',
            message: 'Hello world',
            recipient: { __typename: 'Person', name: 'Cached Alice' },
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: {
          greeting: {
            __typename: 'Greeting',
            message: 'Hello world',
            recipient: { __typename: 'Person', name: 'Alice' },
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('does not suspend deferred queries with data in the cache and using a "cache-and-network" fetch policy', async () => {
    const query = gql`
      query {
        greeting {
          message
          ... on Greeting @defer {
            recipient {
              name
            }
          }
        }
      }
    `;

    const link = new MockSubscriptionLink();
    const cache = new InMemoryCache();
    const client = new ApolloClient({ cache, link });

    cache.writeQuery({
      query,
      data: {
        greeting: {
          __typename: 'Greeting',
          message: 'Hello cached',
          recipient: { __typename: 'Person', name: 'Cached Alice' },
        },
      },
    });

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { fetchPolicy: 'cache-and-network' }),
      { client }
    );

    expect(result.current).toMatchObject({
      data: {
        greeting: {
          message: 'Hello cached',
          __typename: 'Greeting',
          recipient: { __typename: 'Person', name: 'Cached Alice' },
        },
      },
      networkStatus: NetworkStatus.loading,
      error: undefined,
    });

    link.simulateResult({
      result: {
        data: { greeting: { __typename: 'Greeting', message: 'Hello world' } },
        hasNext: true,
      },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          greeting: {
            __typename: 'Greeting',
            message: 'Hello world',
            recipient: { __typename: 'Person', name: 'Cached Alice' },
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    link.simulateResult({
      result: {
        incremental: [
          {
            data: {
              recipient: { name: 'Alice', __typename: 'Person' },
              __typename: 'Greeting',
            },
            path: ['greeting'],
          },
        ],
        hasNext: false,
      },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          greeting: {
            __typename: 'Greeting',
            message: 'Hello world',
            recipient: { __typename: 'Person', name: 'Alice' },
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(3);
    expect(renders.suspenseCount).toBe(0);
    expect(renders.frames).toMatchObject([
      {
        data: {
          greeting: {
            __typename: 'Greeting',
            message: 'Hello cached',
            recipient: { __typename: 'Person', name: 'Cached Alice' },
          },
        },
        networkStatus: NetworkStatus.loading,
        error: undefined,
      },
      {
        data: {
          greeting: {
            __typename: 'Greeting',
            message: 'Hello world',
            recipient: { __typename: 'Person', name: 'Cached Alice' },
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: {
          greeting: {
            __typename: 'Greeting',
            message: 'Hello world',
            recipient: { __typename: 'Person', name: 'Alice' },
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('suspends deferred queries with lists and properly patches results', async () => {
    const query = gql`
      query {
        greetings {
          message
          ... on Greeting @defer {
            recipient {
              name
            }
          }
        }
      }
    `;

    const link = new MockSubscriptionLink();

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query),
      { link }
    );

    expect(renders.suspenseCount).toBe(1);

    link.simulateResult({
      result: {
        data: {
          greetings: [
            { __typename: 'Greeting', message: 'Hello world' },
            { __typename: 'Greeting', message: 'Hello again' },
          ],
        },
        hasNext: true,
      },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          greetings: [
            { __typename: 'Greeting', message: 'Hello world' },
            { __typename: 'Greeting', message: 'Hello again' },
          ],
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    link.simulateResult({
      result: {
        incremental: [
          {
            data: {
              __typename: 'Greeting',
              recipient: { __typename: 'Person', name: 'Alice' },
            },
            path: ['greetings', 0],
          },
        ],
        hasNext: true,
      },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          greetings: [
            {
              __typename: 'Greeting',
              message: 'Hello world',
              recipient: { __typename: 'Person', name: 'Alice' },
            },
            {
              __typename: 'Greeting',
              message: 'Hello again',
            },
          ],
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    link.simulateResult({
      result: {
        incremental: [
          {
            data: {
              __typename: 'Greeting',
              recipient: { __typename: 'Person', name: 'Bob' },
            },
            path: ['greetings', 1],
          },
        ],
        hasNext: false,
      },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          greetings: [
            {
              __typename: 'Greeting',
              message: 'Hello world',
              recipient: { __typename: 'Person', name: 'Alice' },
            },
            {
              __typename: 'Greeting',
              message: 'Hello again',
              recipient: { __typename: 'Person', name: 'Bob' },
            },
          ],
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(4);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        data: {
          greetings: [
            { __typename: 'Greeting', message: 'Hello world' },
            { __typename: 'Greeting', message: 'Hello again' },
          ],
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: {
          greetings: [
            {
              __typename: 'Greeting',
              message: 'Hello world',
              recipient: { __typename: 'Person', name: 'Alice' },
            },
            {
              __typename: 'Greeting',
              message: 'Hello again',
            },
          ],
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: {
          greetings: [
            {
              __typename: 'Greeting',
              message: 'Hello world',
              recipient: { __typename: 'Person', name: 'Alice' },
            },
            {
              __typename: 'Greeting',
              message: 'Hello again',
              recipient: { __typename: 'Person', name: 'Bob' },
            },
          ],
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('suspends queries with deferred fragments in lists and properly merges arrays', async () => {
    const query = gql`
      query DeferVariation {
        allProducts {
          delivery {
            ...MyFragment @defer
          }
          sku
          id
        }
      }

      fragment MyFragment on DeliveryEstimates {
        estimatedDelivery
        fastestDelivery
      }
    `;

    const link = new MockSubscriptionLink();

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query),
      { link }
    );

    expect(renders.suspenseCount).toBe(1);

    link.simulateResult({
      result: {
        data: {
          allProducts: [
            {
              __typename: 'Product',
              delivery: {
                __typename: 'DeliveryEstimates',
              },
              id: 'apollo-federation',
              sku: 'federation',
            },
            {
              __typename: 'Product',
              delivery: {
                __typename: 'DeliveryEstimates',
              },
              id: 'apollo-studio',
              sku: 'studio',
            },
          ],
        },
        hasNext: true,
      },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          allProducts: [
            {
              __typename: 'Product',
              delivery: {
                __typename: 'DeliveryEstimates',
              },
              id: 'apollo-federation',
              sku: 'federation',
            },
            {
              __typename: 'Product',
              delivery: {
                __typename: 'DeliveryEstimates',
              },
              id: 'apollo-studio',
              sku: 'studio',
            },
          ],
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    link.simulateResult({
      result: {
        hasNext: true,
        incremental: [
          {
            data: {
              __typename: 'DeliveryEstimates',
              estimatedDelivery: '6/25/2021',
              fastestDelivery: '6/24/2021',
            },
            path: ['allProducts', 0, 'delivery'],
          },
          {
            data: {
              __typename: 'DeliveryEstimates',
              estimatedDelivery: '6/25/2021',
              fastestDelivery: '6/24/2021',
            },
            path: ['allProducts', 1, 'delivery'],
          },
        ],
      },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          allProducts: [
            {
              __typename: 'Product',
              delivery: {
                __typename: 'DeliveryEstimates',
                estimatedDelivery: '6/25/2021',
                fastestDelivery: '6/24/2021',
              },
              id: 'apollo-federation',
              sku: 'federation',
            },
            {
              __typename: 'Product',
              delivery: {
                __typename: 'DeliveryEstimates',
                estimatedDelivery: '6/25/2021',
                fastestDelivery: '6/24/2021',
              },
              id: 'apollo-studio',
              sku: 'studio',
            },
          ],
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });
  });

  it('throws network errors returned by deferred queries', async () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();

    const query = gql`
      query {
        greeting {
          message
          ... on Greeting @defer {
            recipient {
              name
            }
          }
        }
      }
    `;

    const link = new MockSubscriptionLink();

    const { renders } = renderSuspenseHook(() => useSuspenseQuery(query), {
      link,
    });

    link.simulateResult({
      error: new Error('Could not fetch'),
    });

    await waitFor(() => expect(renders.errorCount).toBe(1));

    expect(renders.errors.length).toBe(1);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toEqual([]);

    const [error] = renders.errors as ApolloError[];

    expect(error).toBeInstanceOf(ApolloError);
    expect(error.networkError).toEqual(new Error('Could not fetch'));
    expect(error.graphQLErrors).toEqual([]);

    consoleSpy.mockRestore();
  });

  it('throws graphql errors returned by deferred queries', async () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();

    const query = gql`
      query {
        greeting {
          message
          ... on Greeting @defer {
            recipient {
              name
            }
          }
        }
      }
    `;

    const link = new MockSubscriptionLink();

    const { renders } = renderSuspenseHook(() => useSuspenseQuery(query), {
      link,
    });

    link.simulateResult({
      result: {
        errors: [new GraphQLError('Could not fetch greeting')],
      },
    });

    await waitFor(() => expect(renders.errorCount).toBe(1));

    expect(renders.errors.length).toBe(1);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toEqual([]);

    const [error] = renders.errors as ApolloError[];

    expect(error).toBeInstanceOf(ApolloError);
    expect(error.networkError).toBeNull();
    expect(error.graphQLErrors).toEqual([
      new GraphQLError('Could not fetch greeting'),
    ]);

    consoleSpy.mockRestore();
  });

  it('throws errors returned by deferred queries that include partial data', async () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();

    const query = gql`
      query {
        greeting {
          message
          ... on Greeting @defer {
            recipient {
              name
            }
          }
        }
      }
    `;

    const link = new MockSubscriptionLink();

    const { renders } = renderSuspenseHook(() => useSuspenseQuery(query), {
      link,
    });

    link.simulateResult({
      result: {
        data: { greeting: null },
        errors: [new GraphQLError('Could not fetch greeting')],
      },
    });

    await waitFor(() => expect(renders.errorCount).toBe(1));

    expect(renders.errors.length).toBe(1);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toEqual([]);

    const [error] = renders.errors as ApolloError[];

    expect(error).toBeInstanceOf(ApolloError);
    expect(error.networkError).toBeNull();
    expect(error.graphQLErrors).toEqual([
      new GraphQLError('Could not fetch greeting'),
    ]);

    consoleSpy.mockRestore();
  });

  it('discards partial data and does not throw errors returned in incremental chunks but returns them in `error` property', async () => {
    const query = gql`
      query {
        hero {
          name
          heroFriends {
            id
            name
            ... @defer {
              homeWorld
            }
          }
        }
      }
    `;

    const link = new MockSubscriptionLink();

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query),
      { link }
    );

    link.simulateResult({
      result: {
        data: {
          hero: {
            name: 'R2-D2',
            heroFriends: [
              {
                id: '1000',
                name: 'Luke Skywalker',
              },
              {
                id: '1003',
                name: 'Leia Organa',
              },
            ],
          },
        },
        hasNext: true,
      },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          hero: {
            heroFriends: [
              {
                id: '1000',
                name: 'Luke Skywalker',
              },
              {
                id: '1003',
                name: 'Leia Organa',
              },
            ],
            name: 'R2-D2',
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    link.simulateResult({
      result: {
        incremental: [
          {
            path: ['hero', 'heroFriends', 0],
            errors: [
              new GraphQLError(
                'homeWorld for character with ID 1000 could not be fetched.',
                { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
              ),
            ],
            data: {
              homeWorld: null,
            },
          },
          // This chunk is ignored since errorPolicy `none` throws away partial
          // data
          {
            path: ['hero', 'heroFriends', 1],
            data: {
              homeWorld: 'Alderaan',
            },
          },
        ],
        hasNext: false,
      },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          hero: {
            heroFriends: [
              {
                id: '1000',
                name: 'Luke Skywalker',
              },
              {
                id: '1003',
                name: 'Leia Organa',
              },
            ],
            name: 'R2-D2',
          },
        },
        networkStatus: NetworkStatus.error,
        error: new ApolloError({
          graphQLErrors: [
            new GraphQLError(
              'homeWorld for character with ID 1000 could not be fetched.',
              { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
            ),
          ],
        }),
      });
    });

    expect(result.current.error).toBeInstanceOf(ApolloError);

    expect(renders.count).toBe(3);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        data: {
          hero: {
            heroFriends: [
              {
                id: '1000',
                name: 'Luke Skywalker',
              },
              {
                id: '1003',
                name: 'Leia Organa',
              },
            ],
            name: 'R2-D2',
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: {
          hero: {
            heroFriends: [
              {
                id: '1000',
                name: 'Luke Skywalker',
              },
              {
                id: '1003',
                name: 'Leia Organa',
              },
            ],
            name: 'R2-D2',
          },
        },
        networkStatus: NetworkStatus.error,
        error: new ApolloError({
          graphQLErrors: [
            new GraphQLError(
              'homeWorld for character with ID 1000 could not be fetched.',
              { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
            ),
          ],
        }),
      },
    ]);
  });

  it('adds partial data and does not throw errors returned in incremental chunks but returns them in `error` property with errorPolicy set to `all`', async () => {
    const query = gql`
      query {
        hero {
          name
          heroFriends {
            id
            name
            ... @defer {
              homeWorld
            }
          }
        }
      }
    `;

    const link = new MockSubscriptionLink();

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { errorPolicy: 'all' }),
      { link }
    );

    link.simulateResult({
      result: {
        data: {
          hero: {
            name: 'R2-D2',
            heroFriends: [
              {
                id: '1000',
                name: 'Luke Skywalker',
              },
              {
                id: '1003',
                name: 'Leia Organa',
              },
            ],
          },
        },
        hasNext: true,
      },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          hero: {
            heroFriends: [
              {
                id: '1000',
                name: 'Luke Skywalker',
              },
              {
                id: '1003',
                name: 'Leia Organa',
              },
            ],
            name: 'R2-D2',
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    link.simulateResult({
      result: {
        incremental: [
          {
            path: ['hero', 'heroFriends', 0],
            errors: [
              new GraphQLError(
                'homeWorld for character with ID 1000 could not be fetched.',
                { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
              ),
            ],
            data: {
              homeWorld: null,
            },
          },
          // Unlike the default (errorPolicy = `none`), this data will be
          // added to the final result
          {
            path: ['hero', 'heroFriends', 1],
            data: {
              homeWorld: 'Alderaan',
            },
          },
        ],
        hasNext: false,
      },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          hero: {
            heroFriends: [
              {
                id: '1000',
                name: 'Luke Skywalker',
                homeWorld: null,
              },
              {
                id: '1003',
                name: 'Leia Organa',
                homeWorld: 'Alderaan',
              },
            ],
            name: 'R2-D2',
          },
        },
        networkStatus: NetworkStatus.ready,
        error: new ApolloError({
          graphQLErrors: [
            new GraphQLError(
              'homeWorld for character with ID 1000 could not be fetched.',
              { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
            ),
          ],
        }),
      });
    });

    expect(renders.count).toBe(3);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        data: {
          hero: {
            heroFriends: [
              {
                id: '1000',
                name: 'Luke Skywalker',
              },
              {
                id: '1003',
                name: 'Leia Organa',
              },
            ],
            name: 'R2-D2',
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: {
          hero: {
            heroFriends: [
              {
                id: '1000',
                name: 'Luke Skywalker',
                homeWorld: null,
              },
              {
                id: '1003',
                name: 'Leia Organa',
                homeWorld: 'Alderaan',
              },
            ],
            name: 'R2-D2',
          },
        },
        networkStatus: NetworkStatus.ready,
        error: new ApolloError({
          graphQLErrors: [
            new GraphQLError(
              'homeWorld for character with ID 1000 could not be fetched.',
              { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
            ),
          ],
        }),
      },
    ]);
  });

  it('adds partial data and discards errors returned in incremental chunks with errorPolicy set to `ignore`', async () => {
    const query = gql`
      query {
        hero {
          name
          heroFriends {
            id
            name
            ... @defer {
              homeWorld
            }
          }
        }
      }
    `;

    const link = new MockSubscriptionLink();

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { errorPolicy: 'ignore' }),
      { link }
    );

    link.simulateResult({
      result: {
        data: {
          hero: {
            name: 'R2-D2',
            heroFriends: [
              {
                id: '1000',
                name: 'Luke Skywalker',
              },
              {
                id: '1003',
                name: 'Leia Organa',
              },
            ],
          },
        },
        hasNext: true,
      },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          hero: {
            heroFriends: [
              {
                id: '1000',
                name: 'Luke Skywalker',
              },
              {
                id: '1003',
                name: 'Leia Organa',
              },
            ],
            name: 'R2-D2',
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    link.simulateResult({
      result: {
        incremental: [
          {
            path: ['hero', 'heroFriends', 0],
            errors: [
              new GraphQLError(
                'homeWorld for character with ID 1000 could not be fetched.',
                { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
              ),
            ],
            data: {
              homeWorld: null,
            },
          },
          {
            path: ['hero', 'heroFriends', 1],
            data: {
              homeWorld: 'Alderaan',
            },
          },
        ],
        hasNext: false,
      },
    });

    await waitFor(() => {
      expect(result.current).toMatchObject({
        data: {
          hero: {
            heroFriends: [
              {
                id: '1000',
                name: 'Luke Skywalker',
                homeWorld: null,
              },
              {
                id: '1003',
                name: 'Leia Organa',
                homeWorld: 'Alderaan',
              },
            ],
            name: 'R2-D2',
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      });
    });

    expect(renders.count).toBe(3);
    expect(renders.suspenseCount).toBe(1);
    expect(renders.frames).toMatchObject([
      {
        data: {
          hero: {
            heroFriends: [
              {
                id: '1000',
                name: 'Luke Skywalker',
              },
              {
                id: '1003',
                name: 'Leia Organa',
              },
            ],
            name: 'R2-D2',
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
      {
        data: {
          hero: {
            heroFriends: [
              {
                id: '1000',
                name: 'Luke Skywalker',
                homeWorld: null,
              },
              {
                id: '1003',
                name: 'Leia Organa',
                homeWorld: 'Alderaan',
              },
            ],
            name: 'R2-D2',
          },
        },
        networkStatus: NetworkStatus.ready,
        error: undefined,
      },
    ]);
  });

  it('can subscribe to subscriptions and react to cache updates via `subscribeToMore`', async () => {
    interface SubscriptionData {
      greetingUpdated: string;
    }

    interface QueryData {
      greeting: string;
    }

    type UpdateQueryFn = NonNullable<
      SubscribeToMoreOptions<
        QueryData,
        OperationVariables,
        SubscriptionData
      >['updateQuery']
    >;

    const { mocks, query } = useSimpleQueryCase();

    const wsLink = new MockSubscriptionLink();
    const mockLink = new MockLink(mocks);

    const link = split(
      ({ query }) => {
        const definition = getMainDefinition(query);

        return (
          definition.kind === 'OperationDefinition' &&
          definition.operation === 'subscription'
        );
      },
      wsLink,
      mockLink
    );

    const { result, renders } = renderSuspenseHook(
      () => useSuspenseQuery(query, { errorPolicy: 'ignore' }),
      { link }
    );

    await waitFor(() => {
      expect(result.current.data).toEqual({ greeting: 'Hello' });
    });

    const updateQuery = jest.fn<
      ReturnType<UpdateQueryFn>,
      Parameters<UpdateQueryFn>
    >((_, { subscriptionData: { data } }) => {
      return { greeting: data.greetingUpdated };
    });

    result.current.subscribeToMore<SubscriptionData>({
      document: gql`
        subscription {
          greetingUpdated
        }
      `,
      updateQuery,
    });

    wsLink.simulateResult({
      result: {
        data: {
          greetingUpdated: 'Subscription hello',
        },
      },
    });

    await waitFor(() => {
      expect(result.current.data).toEqual({
        greeting: 'Subscription hello',
      });
    });

    expect(updateQuery).toHaveBeenCalledTimes(1);
    expect(updateQuery).toHaveBeenCalledWith(
      { greeting: 'Hello' },
      {
        subscriptionData: {
          data: { greetingUpdated: 'Subscription hello' },
        },
        variables: {},
      }
    );

    expect(renders.count).toBe(3);
    expect(renders.frames).toMatchObject([
      { data: { greeting: 'Hello' }, networkStatus: NetworkStatus.ready },
      {
        data: { greeting: 'Subscription hello' },
        networkStatus: NetworkStatus.ready,
      },
    ]);
  });

  it('works with useDeferredValue', async () => {
    const user = userEvent.setup();

    interface Variables {
      query: string;
    }

    interface Data {
      search: { query: string };
    }

    const QUERY: TypedDocumentNode<Data, Variables> = gql`
      query SearchQuery($query: String!) {
        search(query: $query) {
          query
        }
      }
    `;

    const link = new ApolloLink(({ variables }) => {
      return new Observable((observer) => {
        setTimeout(() => {
          observer.next({
            data: { search: { query: variables.query } },
          });
          observer.complete();
        }, 10);
      });
    });

    const client = new ApolloClient({
      link,
      cache: new InMemoryCache(),
    });

    const suspenseCache = new SuspenseCache();

    function App() {
      const [query, setValue] = React.useState('');
      const deferredQuery = React.useDeferredValue(query);

      return (
        <ApolloProvider client={client} suspenseCache={suspenseCache}>
          <label htmlFor="searchInput">Search</label>
          <input
            id="searchInput"
            type="text"
            value={query}
            onChange={(e) => setValue(e.target.value)}
          />
          <Suspense fallback={<SuspenseFallback />}>
            <Results query={deferredQuery} />
          </Suspense>
        </ApolloProvider>
      );
    }

    function SuspenseFallback() {
      return <p>Loading</p>;
    }

    function Results({ query }: { query: string }) {
      const { data } = useSuspenseQuery(QUERY, { variables: { query } });

      return <div data-testid="result">{data.search.query}</div>;
    }

    render(<App />);

    const input = screen.getByLabelText('Search');

    expect(screen.getByText('Loading')).toBeInTheDocument();

    expect(await screen.findByTestId('result')).toBeInTheDocument();

    await act(() => user.type(input, 'ab'));

    await waitFor(() => {
      expect(screen.getByTestId('result')).toHaveTextContent('ab');
    });

    await act(() => user.type(input, 'c'));

    // useDeferredValue will try rerendering the component with the new value
    // in the background. If it suspends with the new value, React will show the
    // stale UI until the component is done suspending.
    //
    // Here we should not see the suspense fallback while the component suspends
    // until the search finishes loading. Seeing the suspense fallback is an
    // indication that we are suspending the component too late in the process.
    expect(screen.queryByText('Loading')).not.toBeInTheDocument();
    expect(screen.getByTestId('result')).toHaveTextContent('ab');

    // Eventually we should see the updated text content once its done
    // suspending.
    await waitFor(() => {
      expect(screen.getByTestId('result')).toHaveTextContent('abc');
    });
  });

  it('works with startTransition to change variables', async () => {
    type Variables = {
      id: string;
    };

    interface Data {
      todo: {
        id: string;
        name: string;
        completed: boolean;
      };
    }
    const user = userEvent.setup();

    const query: TypedDocumentNode<Data, Variables> = gql`
      query TodoItemQuery($id: ID!) {
        todo(id: $id) {
          id
          name
          completed
        }
      }
    `;

    const mocks: MockedResponse<Data, Variables>[] = [
      {
        request: { query, variables: { id: '1' } },
        result: {
          data: { todo: { id: '1', name: 'Clean room', completed: false } },
        },
        delay: 10,
      },
      {
        request: { query, variables: { id: '2' } },
        result: {
          data: { todo: { id: '2', name: 'Take out trash', completed: true } },
        },
        delay: 10,
      },
    ];

    const client = new ApolloClient({
      link: new MockLink(mocks),
      cache: new InMemoryCache(),
    });

    const suspenseCache = new SuspenseCache();

    function App() {
      const [id, setId] = React.useState('1');

      return (
        <ApolloProvider client={client} suspenseCache={suspenseCache}>
          <Suspense fallback={<SuspenseFallback />}>
            <Todo id={id} onChange={setId} />
          </Suspense>
        </ApolloProvider>
      );
    }

    function SuspenseFallback() {
      return <p>Loading</p>;
    }

    function Todo({
      id,
      onChange,
    }: {
      id: string;
      onChange: (id: string) => void;
    }) {
      const { data } = useSuspenseQuery(query, { variables: { id } });
      const [isPending, startTransition] = React.useTransition();
      const { todo } = data;

      return (
        <>
          <button
            onClick={() => {
              startTransition(() => {
                onChange('2');
              });
            }}
          >
            Refresh
          </button>
          <div data-testid="todo" aria-busy={isPending}>
            {todo.name}
            {todo.completed && ' (completed)'}
          </div>
        </>
      );
    }

    render(<App />);

    expect(screen.getByText('Loading')).toBeInTheDocument();

    expect(await screen.findByTestId('todo')).toBeInTheDocument();

    const todo = screen.getByTestId('todo');
    const button = screen.getByText('Refresh');

    expect(todo).toHaveTextContent('Clean room');

    await act(() => user.click(button));

    // startTransition will avoid rendering the suspense fallback for already
    // revealed content if the state update inside the transition causes the
    // component to suspend.
    //
    // Here we should not see the suspense fallback while the component suspends
    // until the todo is finished loading. Seeing the suspense fallback is an
    // indication that we are suspending the component too late in the process.
    expect(screen.queryByText('Loading')).not.toBeInTheDocument();

    // We can ensure this works with isPending from useTransition in the process
    expect(todo).toHaveAttribute('aria-busy', 'true');

    // Ensure we are showing the stale UI until the new todo has loaded
    expect(todo).toHaveTextContent('Clean room');

    // Eventually we should see the updated todo content once its done
    // suspending.
    await waitFor(() => {
      expect(todo).toHaveTextContent('Take out trash (completed)');
    });
  });
});