Utils for apollo queries refetching

Motivation

Displaying lists with apollo client is really common but it can be very hard to update theses lists with new data or retrieve data from it. We wanted to be able to display data that is always server-sync even if the list has parameters.

Install

npm i @habx/apollo-refetch

Wrap your App with the context provider

  <RefetchProvider>
    {children}
  </RefetchProvider>

How to use

First register your query

 const { refetch, ... } = useQuery<contacts, contactsVariables>(contactsQuery, {
    variables: {
      filters: state.filters,
      paginate: state.paginate,
      orderBy: state.orderBy,
    },
  })
  useRegisterRefetch('contacts', refetch)

Then when you add, remove an element

  const { refetch } = useRefetch()
  const [handleUpsertContact] = useMutation<
    upsertContact,
    upsertContactVariabes
  >(upsertContactMutation, { onCompleted: () => refetch('users')})

And you're done 👍

⚠️ It's not useful to use useRefetch when the operation is an update of an existing entity, apollo updates it automatically