Urql Codegen - Allow types for additional variables

[elilabes]

Urql has the concept of over passing variables to a mutation to use for updating the cache.

This is documented here: https://formidable.com/open-source/urql/docs/graphcache/cache-updates/#variables-for-optimistic-updates

Any additional variables you pass get added to info.variables and can be used to help update the cache. This is helpful, as sometimes you don't have all the information required to find the local cache item to update purely based on the variables passed to the mutation.

Seen as these are never sent to the server, nor are they part of the graphql schema, typescript will complain if you attempt to pass additional variables.

const [todo, updateTodo] = useUpdateTodoMutation()

updateTodo({
  variables: {
    id: "123",
    text: "Hello, World",
    extra: "Value", // typescript will complain that extra doesn't exist.
  }
})

I am wondering what the best way to achieve this is, or if it is even possible with current available plugins. I have had a look at it appears not.

Ideally, it'd be great if there was a plugin that allowed you to pass a generic to any mutation to add in additional variables, e.g.

type AdditionalLocalTodoUpdateVariables = {
  extra: string;
}

const [todo, updateTodo] = useUpdateTodoMutation<AdditionalLocalTodoUpdate>()

updateTodo({
  variables: {
    id: "123",
    text: "Hello, World",
    extra: "Value", // this now exists from the generic so typescript is happy
  }
})

The plugin would change the code generated to this:

export function useUpdateTodoMutation<T>() {
  return Urql.useMutation<UpdateTodoMutation, UpdateTodoMutationVariables & T>(UpdateTodoDocument);
};

If the above change would be accepted to @graphql-codegen/typescript-urql, maybe as a new flag called allowAdditionalMutationVariables then I'd be happy to create a PR.

Otherwise, can someone please advise how I should tackle this problem 😄