Refetching

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?

You might use this field like:

export const PetRefetchButton = iso(`
  field Pet.PetRefetchButton @component {
    name,
    __refetch,
  }
`)(PetRefetchButtonComponent);

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.)

You might use it as follows:

// Note: if you inline this function into the iso literal, you will not have to
// annotate the type of props. But if it is separate, TypeScript will complain that
// it doesn't know the type of the data param.
function PetRefetcherButtonComponent(data: PetRefetchButtonParams) {
  return <Button onClick={() => data.__refetch()}>Refetch {data.name}</Button>;
}

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__.