Temporary useQuery hook implementation

use-query.js

/**
 * React hook to execute an Apollo query and keep the data up to date according
 * what's newest on the cache.
 *
 * @param { DocumentNode } query: the GraphQL query you want to run
 * @param { Object } variables: the variables you want to interpolate on the query
 * Note: you may want to memoize your object to prevent the query to run multiple times.
 *
 * Read more about param types on Apollo's watchQuery docs:
 * https://www.apollographql.com/docs/react/api/apollo-client/#ApolloClient.watchQuery

 * @returns { Object } an object with 3 properties:
 * { data: (or undefined), loading: whether is loading or not, error: (or undefined) }
 */
function useQuery(query, variables) {
  const [state, setState] = useState({ loading: true });

  const handleNext = ({ data }) => setState({ data, loading: false });
  const handleError = (error) => setState({ error, loading: false });

  useEffect(() => {
    // get client created for ApolloProvider
    const client = getApolloClient();

    const observableQuery = client.watchQuery({ query, variables });
    const subscription = observableQuery.subscribe({
      next: handleNext,
      error: handleError,
    });

    return () => subscription.unsubscribe();
  }, [query, variables]);

  return { ...state };
}

Relevant links:

Conversation about officially supporting hooks:

• apollographql/react-apollo#2539

3rd party implementation being used for many people:

• https://github.com/trojanowski/react-apollo-hooks
• https://www.npmjs.com/package/react-apollo-hooks

Official hooks support (in beta):

• https://www.npmjs.com/package/@apollo/react-hooks
• apollographql/react-apollo#2892