question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using cache.updateQuery() data is null

See original GitHub issue

urql version & exchanges:

image

Steps to reproduce

  1. go here: https://codesandbox.io/s/urql-svelte-crud-with-indexeddb-cqg5i?file=/urql.js:1152-1179
  2. click on “Todos list”
  3. click on a “Complete” button, the one you want
  4. it gives an error: Cannot set property 'text' of null

Why this error?

Why is data null?

I’m using this code:

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

const updates = {
  Mutation: {
    updateTodo: (result, args, cache, info) => {
      if (info.optimistic) {
        cache.updateQuery(
          { query: TODO_QUERY, variables: { id: info.variables.id } },
          data => {
            console.log("data:" + data);
            data.text = "UPDATING";
            return data;
          }
        );
      }
    }
  }
};

const optimistic = {
  updateTodo: () => {}
};

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
};

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:18 (17 by maintainers)

github_iconTop GitHub Comments

1reaction
JoviDeCroockcommented, Jun 14, 2020

Optimistic updates are meant to reflect an early answer from the server, using to indicate something is updating isn’t really its use case. This could be done by means of result.fetching instead.

The thing is, optimistic is used to ensure we can actually be offline, when a user is offline and performs a mutation just highlighting that certain thing is updating isn’t of much use to our user, if it’s unsafe to simulate an early response we should doubt that this entity can be mutated in an offline-state.

1reaction
JoviDeCroockcommented, Jun 13, 2020

It’s the same as you are doing in updates.Mutation, cache.readFragment with the TodoFragment, id and you should have that data

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using cache.updateQuery() data is null · Issue #863 - GitHub
Why is data null? I'm using this code: import { initClient, dedupExchange, fetchExchange } ...
Read more >
Reading and writing data to the cache - Apollo GraphQL Docs
If the cache is missing data for any of the query's fields, readQuery returns null . It does not attempt to fetch data...
Read more >
Apollo Client client.readQuery returning null when data is in ...
I was facing issues with .readQuery() last night. I was getting null returned everytime, though the logic was right. I was calling ....
Read more >
Cache Updates | urql Documentation
This data may also be null if the cache doesn't actually have enough locally cached information ... updateQuery are still the only methods...
Read more >
GraphQL Mutations and Caching using Apollo Client
In this post, we will learn how to execute mutations using the Apollo Client to update data in the GraphQL server. Next, we...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found