Get handle on client from query result?

[GollyJer]

We have a useMe hook that returns the logged in user's info and a method to easily update the current user info.
With Apollo it was easy to access client from the query.

I don't see it but thought I'd ask. Is there something similar in Urql?

export const useMe = (query = GET_ME, fetchPolicy = 'cache-first') => {
  let me;

  const meQuery = useQuery(query, { fetchPolicy });
  if (meQuery.error) {
    console.log('useMe QUERY ERROR ==>', meQuery.error);
  }

  const user = meQuery.data?.user[0];
  if (user) {
    // This is a convenience function we're passing along with me.
    // It allows the consumer the ability to call me.update with an
    // array of new values.
    const update = (values: meValuesType) => {
      meQuery.client.mutate({  // 👈 possible with Urql ❔
        mutation: UPDATE_ME,
        variables: { id: user.id, changes: { ...values } },
      });

      meQuery.refetch();
    };

    me = {
      ...user,
      update,
      refetch: meQuery.refetch,
    };
  }

  return me;
};

[JoviDeCroock]

You would have to make a useMutation hook so this would look like:

export const useMe = (query = GET_ME, fetchPolicy = 'cache-first') => {
  const meQuery = useQuery(query, { fetchPolicy });
  const [, updateUser] = useMutation(UPDATE_ME)
  if (meQuery.error) {
    console.log('useMe QUERY ERROR ==>', meQuery.error);
  }

  const user = meQuery.data?.user[0];

  return [user, executeQuery, updateMe];
};

[GollyJer]

Thanks for the reply @JoviDeCroock.
Makes sense.

I also like,whether you intended it or not, the idea of updating our syntax to a Urql-like return structure. 😀

Day 2 and LOVING Urql. Graphcache has already made our cache management life so much better.