Refetching

note

The __refetch fields described in this document will eventually be combined with @loadable fields, and this documentation will become outdated.

Refetch fields

If an object has an id: ID! field, Isograph will generate a __refetch field on each selection of that type. If you select that field, Isograph will generate a query for all of the fields selected on that object in the (merged) parent query.

Importantly, this includes fields selected in other resolvers, and not just in children! If one resolver selected the __refetch field on a given user and another resolver selected name field on that same user, the generated __refetch query would include the name field.

This is a quite restrictive choice, and more customizability needs to be introduced. But it has the advantage of meaning that if the set of fields selected on a given object change, the refetch queries will be regenerated by the compiler and reflect the changes. So, developers can modify components without concern about breaking refetch queries.

How do we use this __refetch field?

Consider:

export const PetRefetcherButtonComponent = iso(`
  field PetRefetcherButtonComponent on Pet {
    name
    __refetch
  }
`)(({ data }) => {
  return (
    <Button onClick={() => data.__refetch()[1]()}>Refetch {data.name}</Button>
  );
});

When read out, the __refetch field is a function(*) that when called will make a network request to refetch the field. (Also, in the future, you will be able to do things like get the status of the mutation, suspend on it, etc. For now, it just triggers a mutation in the background.)

The signature of the __refetch field is (args: Variables) => [string /* unique id */, () => void /* makes network request */]. It will be changed to be the same signature as loadable fields (i.e. (args: Variables) => [string /* unique id */, () => [DisposeFn, FragmentReference]]).

The fields selected on the mutation response (under the pet) will be exactly the fields that are selected on that Pet in the merged query, including name and the auto-selected id, as well as any fields selected on the same Pet in other resolvers.

You can view the generated mutation query by looking for a file whose name starts with __refetch__.