Root level nullable field not causing re-render when mutated

[lmiller1990]

EDIT I found a solution. There is no bug - I'm just learning GraphQL and there are some gotchas. Not clear on the best pattern. I'll leave my question here and add my work-around at the bottom.

---

Hi, I made an example demonstrating my problem: https://github.com/lmiller1990/urql-vue-bug. I have a nullable, root level field. When a mutation changed it from null to an object { username: 'blah' }, the UI is not re-rendered. This problem is present in both React and Vue bindings (see my reproduction).

The problem does not happen if I make the object non-nullable.

Relevant code:

server: https://github.com/lmiller1990/urql-vue-bug/blob/main/server.ts
react: https://github.com/lmiller1990/urql-vue-bug/blob/main/src/mainReact.tsx
queries: https://github.com/lmiller1990/urql-vue-bug/blob/main/src/queries.ts

The README has instructions to run the reproduction locally. It's as minimal as I could make it.
The problem I having is demonstrated by the queries that have the *Bug suffix. Basically the schema is

type Viewer { 
  username String!
}

type Query = {
  viewer: Viewer
}

So if you do

useQuery(`
  query Q {
    viewer {
      username
    }
  }
`)

You are either getting null, if you are not authenticated, { viewer: null }, or { viewer: { username: '...' } } if you are.
For some reason, when I do a mutation that makes viewer : null become viewer : { username: '...' } both React and Vue are not re-rendering.

The GQL request is made (observed via network tab) and the new data is received, so urql knows something changed, but no re-render.

If I change the schema:

type Query = {
  app: {
    viewer: Viewer!
  }
}

And make viewer nested and not nullable, instead always returning something, everything works as expected. Is there some limitation with urql and having a null field become a complex object? What am I missing? This seems like a perfectly valid use case.

Edit: Work around

Right. For anyone following along, the problem was since there is no __typename for a root level nullable field, urql cannot track it and invalidate the cache when a mutation occurs.

There is a work-around: I was able to make it work using additionalTypenames. It's documented in the "document cache gotchas" section.

    const context = React.useMemo(() => ({ additionalTypenames: ['NullableViewer'] }), []);

    const [result, reexecuteQuery] = useQuery({
      query: authQuery,
      requestPolicy,
      context
    });

    const [_loginResult, login] = useMutation(loginMut)
    const [_logoutResult, logout] = useMutation(logoutMut)

    const doLogin = () => login(undefined, context)
    const doLogout = () => logout(undefined, context)