Urql: With makeDefaultStorage and offlineExchange: error: "Cannot read property '0' of null"

[frederikhors]

Steps to reproduce

1. go on this CRUD example here: https://codesandbox.io/s/urql-svelte-crud-with-indexeddb-cqg5i
2. click on "New todo"
3. save it with button
4. click on "Reload" button
5. it gives an error: Cannot read property '0' of null

GIF:

Code:

import gql from "graphql-tag";
import { initClient, dedupExchange, fetchExchange } from "@urql/svelte";
import { offlineExchange } from "@urql/exchange-graphcache";
import { makeDefaultStorage } from "@urql/exchange-graphcache/default-storage";
import { TODOS_QUERY, TODO_FRAG } from "./gql";

const updates = {
  Mutation: {
    addTodo: (result, args, cache, info) => {
      const allFields = cache.inspectFields("Query");
      const todoQueries = allFields.filter(x => x.fieldName === "todos");
      todoQueries.forEach(x => {
        cache.updateQuery(
          { query: TODOS_QUERY, variables: x.arguments },
          data => {
            return {
              ...data,
              todos: [...data.todos, result.addTodo]
            };
          }
        );
      });
    }
  }
};

const optimistic = {
  addTodo: (variables, cache, info) => {
    return {
      ...variables,
      __typename: "Todo",
      id: "TEMP_ID_" + Date.now(),
      complete: false,
      createdAt: Date.now()
    };
  }
};

const storage = makeDefaultStorage({
  idbName: "graphcache-v3",
  maxAge: 7
});

const exchanges = [
  dedupExchange,
  offlineExchange({ storage, updates, optimistic }),
  fetchExchange
];

function OnInit() {
  initClient({ url: "https://h1pcl.sse.codesandbox.io", exchanges });
}

export default {
  OnInit
};

[frederikhors]

I thought it was due to this: https://spectrum.chat/urql/help/is-there-a-way-to-invalidate-queries-with-variables-without-using-variables~5e4fc1b8-849e-46e9-a9ca-72698a8433d0?m=MTU4NTkyMDE5ODMwOA==.

But it's happening also with cache.invalidate for the deleteTodo resolver:

deleteTodo: (result, args, cache, info) => {
  if (result.deleteTodo) {
    cache.invalidate({ __typename: "Todo", id: args.id });
  }
}

[frederikhors]

Here the gif for deleteTodo with cache.invalidate().

[kitten]

Yea, I found the issue. I think it’s a bug with our default storage, so I’ll have to take another look at it.