React Hook around Apollo GraphQL query

#webdev #graphql #javascript #react

Here is an example of the custom hook around Apollo query, with simple reuse and keeping things in one place.
BTW you can check React Hook around Apollo GraphQL mutation here.

import * as RH from "@apollo/react-hooks";
import gql from "graphql-tag";
 
// users query
export const USERS_LIST_QUERY = gql`
  query GetUsersQuery($input: UsersInput) {
    getUsers(input: $input) {
      firstName
      lastName
      online
      id
    }
  }
`;
 
// query entity hook
export const useUsersQuery = (variables = {}) => {
  const { data, loading, error } = RH.useQuery(USERS_LIST_QUERY, {
    variables: { input: { online: false, ...variables } }
  });
 
  return {
    users: data?.getUsers || [], // list with default value
    isLoading: loading, // loading state
    error: error?.graphQLErrors, // parse errors here
    refetchUsers: data.refetch // refetch your query
  };
};