Suspense-ready useQuery

useQuery.ts

import { ApolloError } from 'apollo-boost';
import { print } from 'graphql/language/printer';
import React from 'react';

const queries = new Map();

const getCacheKey = ({ query, ...opts }) =>
  `${print(query)}@@${JSON.stringify(opts)}`;

const invalidateCachedQuery = options =>
  queries.delete(getCacheKey(options));

const getCachedQuery = (client, options) => {
  const cacheKey = getCacheKey(options);
  let observableQuery = queries.get(cacheKey);

  if (observableQuery == null) {
    observableQuery = client.watchQuery(options);
    queries.set(cacheKey, observableQuery);
  }
  return observableQuery;
};

const actHack = fn => {
  if (fn) {
    fn();
  }
};

export const ApolloContext = React.createContext(null);

export const ApolloProvider = props => (
  <ApolloContext.Provider value={props.client}>
    {props.children}
  </ApolloContext.Provider>
);

export function useQuery(query, vars) {
  const client = React.useContext(ApolloContext);
  const options = React.useMemo(() => ({ query, ...vars }), [
    query,
    vars,
  ]);
  const observableQuery = React.useMemo(
    () => getCachedQuery(client, options),
    [client, options]
  );

  const currentResult = React.useMemo(() => {
    const result = observableQuery.currentResult();
    let data = result.data;
    if (result.error || result.errors) {
      data = {
        ...result.data,
        ...(observableQuery.getLastResult() || {}).data,
      };
    }

    return {
      data,
      error:
        result.errors && result.errors.length > 0
          ? new ApolloError({ graphQLErrors: result.errors })
          : result.error,
      networkStatus: undefined,
      partial: result.partial,
    };
  }, [observableQuery]);

  // eslint-disable-next-line no-unused-vars
  const [responseId, setResponseId] = React.useState(0);

  React.useEffect(() => {
    const invalidateHack = () => {
      actHack(() => {
        setResponseId(x => x + 1);
      });
    };
    const subscription = observableQuery.subscribe(
      invalidateHack,
      invalidateHack
    );

    invalidateCachedQuery(options);
    return () => {
      subscription.unsubscribe();
    };
  }, [observableQuery, options]);

  if (currentResult.error != null && options.onError) {
    options.onError(currentResult.error);
  }

  if (currentResult.partial) {
    throw observableQuery.result();
  }

  return currentResult;
}