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 }; };
More tips and best practices on my twitter.
Feedback is appreciated. Cheers!
Top comments (0)