Use useAppQuery against graphql api endpoint - will query result be auto updated like apollo client

Use useAppQuery against graphql api endpoint - will query result be auto updated like apollo client

peterpot20
Shopify Partner
22 2 3

Hi, I am looking for an authenticated replacement for the plain apollo client's useQuery and useMutation. I was able to use apollo client's useQuery to pull data from the graphql api endpoint and when the database is updated, the react component will automatically be refreshed with the updated query result.

 

Now I need to implement a similar functionality to apollo client's useQuery and useMutation but with authentication validation. I checked the boilerplate code for Shopify's useAppQuery and realized that they use react-query's useQuery. I know this is a general purpose fetching function suitable for both REST and graphql endpoint.

 

What I am interested to know is that if I use useAppQuery to query a graphql api, when there is a change in the database value, will that trigger a re-rendering of the component that uses useAppQuery? If that's not possible, how do I implement apollo client's useQuery and useMutation with Shopify authentication validation?

 

Thanks!

Reply 1 (1)

peterpot20
Shopify Partner
22 2 3

This is my attempt to implement an auto polling useAppQuery against a graphql endpoint. However, this causes re-rendering of a component every refetchInterval.

From what I know apollo client's useQuery has a way to prevent unnecessary re-rendering due to the way it caches and does comparison. 

Can anyone suggests a way to replace react-query with apollo client in useAppQuery's implementation? I want re-rendering to occur only if the database actually has a change of values.

 

import { useAuthenticatedFetch } from "./useAuthenticatedFetch";
import { useMemo } from "react";
import { useQuery } from "react-query";

/**
 * A hook for querying your custom app data using GraphQL.
 * @desc A thin wrapper around useAuthenticatedFetch and react-query's useQuery.
 *
 * @Anonymous {Object} options - The options for your query. Accepts 4 keys:
 *
 * 1. url: The URL to query. E.g: /graphql`
 * 2. query: The GraphQL query string.
 * 3. variables: Variables for the GraphQL query.
 * 4. reactQueryOptions: The options for `useQuery`. See: https://react-query.tanstack.com/reference/useQuery
 *
 * @returns Return value of useQuery.  See: https://react-query.tanstack.com/reference/useQuery.
 */
export const useAuthenticatedGqlQuery = ({ url, query, variables = {}, reactQueryOptions }) => {
  const authenticatedFetch = useAuthenticatedFetch();
  
  const fetch = useMemo(() => {
    return async () => {
      const response = await authenticatedFetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          query: query,
          variables: variables,
        }),
      });
      return response.json();
    };
  }, [url, query, JSON.stringify(variables)]);

  return useQuery([url, query, variables], fetch, {
    ...reactQueryOptions,
    refetchOnWindowFocus: false,
    refetchInterval: 500, // Refetch every 0.5 seconds
  });
};



Thanks!