Urql: Unable to invalidate null Connection type

[olistic]

[email protected]
@urql/[email protected]

Steps to reproduce

1. Have a Connection type following the spec and a mutation that creates a Node type.

type Query {
  exercisesConnection(page: PageInput!): ExercisesConnection
}

type Mutation {
  createExercise(input: CreateExerciseInput!): CreateExerciseResult
}

1. Configure the Graphcache's cacheExchange so that when creating a Node type, all queries for the corresponding Connection type (i.e. the different pages) are invalidated:

cacheExchange({
  updates: {
    Mutation: {
      createExercise: (_result, _args, cache) => {
        cache
          .inspectFields({ __typename: 'Query' })
          .filter(({ fieldName }) => fieldName === 'exercisesConnection')
          .forEach(({ fieldName, arguments: args }) => {
            cache.invalidate('Query', fieldName, args);
          });
      },
    },
  },
})

1. Query the first page for which there are no results:

query {
  exercisesConnection({ page: { after: null, first: 10 } }) {
    ...
  }
}

This returns null for the exercisesConnection field as there are no exercises:

1. Execute the mutation and return to the list view.

Expected behavior

The query for the first page (3) results in a cache miss and a new request is made to the server, populating the list with the newly created exercise.

Actual behavior

The query for the first page results in a cache hit, and the list remains empty.

If the page is refreshed, the new exercise appears:

The curious thing is that, at this point, if a second exercise is created, the cache is properly invalidated and the query is re-executed upon visiting the list view.

I'm gonna work on a reproduction ASAP, but figured I'd open this in the meantime just in case it's obvious what I'm doing wrong.

Thanks!

[olistic]

If I add the following logging lines:

@@ -19,7 +19,10 @@ const cacheOptions = {
      .inspectFields({ __typename: 'Query' })
      .filter(({ fieldName }) => fieldName === 'exercisesConnection')
      .forEach(({ fieldName, arguments: args }) => {
+       console.log(`Invalidating Query.${fieldName} with following args:`, args);
+       console.log('Pre:', cache.resolve('Query', fieldName, args));
        cache.invalidate('Query', fieldName, args);
+       console.log('Post:', cache.resolve('Query', fieldName, args));
      });
  },
},

Console after creating the first exercise

Console after creating the second exercise

[JoviDeCroock]

hey @olistic

Thank you for the awesome explanation, I found the cause and there's a PR up.