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.

Update store after mutation (create) unclear how to handle

See original GitHub issue

There are a lot of docs but one part seems to be totally unclear on how to approach.

I use GraphCool as backend and React Native as frontend so that’s how the names of the queries are setup.

Say I have a list of invoices

  • Invoice 1 Paid: true
  • Invoice 2 Paid: false

I have 2 queries (I show 2 lists on the screen): All & unpaid

query allInvoices {
    allInvoices {
      id
      paid
    }
}
query allInvoices {
    allInvoices(filter: {paid: false }) {
      id
      paid
    }
}

I insert a new invoice:

mutation createItemType(
    $name: String!,
    $paid: Boolean,
  ) {
    createInvoice(
      name: $name,
      paid: $paid,
    ) {
       id
       paid
    }
  }

I do understand that Apollo is not magic in a sense that it would automatically update my 2 views: all & unpaid. The advice in the documentation at this moment seems to be that I should use: update()

So I do that:

@graphql(gql`
  mutation createInvoice(
    $name: String!,
    $paid: Boolean,
  ) {
    createInvoice(
      name: $name,
      paid: $paid,
    ) {
      id,
      paid,
    }
  }
`, {
  name: 'createInvoice',
  options: {
    update: (proxy, { data: { createInvoice } }) => {
      const allInvoicesQuery = gql`
        query allInvoicesQuery {
          allInvoices {
            id
            paid
          }
        }
      `;

      const data = proxy.readQuery({ query: allInvoicesQuery });
      data.allInvoices.unshift(createInvoice);
      proxy.writeQuery({
        query: allInvoicesQuery,
        data
      });
    },
  },
})

The problem: The All invoices list will get updated. The one with the paid filter does not.

It’s totally unclear how to get this right. I even tried adding variables to the writeQuery and readQuery but it just doesn’t seem to work out. The simple examples in the tutorials DO work but it seems the more complex cases don’t.

Questions:

  1. Where to find correct examples about real-life situations where you do filter data?
  2. Is all of this code really needed? It’s a bug amount of code (I have many more fields) for just a create statement?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:25
  • Comments:35 (1 by maintainers)

github_iconTop GitHub Comments

51reactions
stale[bot]commented, Jul 15, 2017

This issue has been automatically marked as stale becuase it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Apollo Client!

43reactions
lucfrankencommented, May 19, 2017

While totally agreeing that this should not be needed it sounds like a very simple and effective fix for the time being!

Another alternative is just polling:

http://dev.apollodata.com/react/api-queries.html#graphql-config-options-pollInterval

export default graphql(gql`query { ... }`, {
  options: { pollInterval: 5000 },
})(MyComponent);

Even easier because you can implement it without any callback.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to handle cache update after mutation in multiple views?
Let's say after mutation I want to update cache to reflect that change. I am using read/writeQuery to do the update. With this...
Read more >
Mutations in Apollo Client - Apollo GraphQL Docs
An update function attempts to replicate a mutation's back-end modifications in your client's local cache. These cache modifications are broadcast to all ...
Read more >
A deep dive into the Relay store - Yash Mahalwal - Medium
Store is updated as a result of mutations and subscriptions. Relay provides special functions called updater functions to deal with the store.
Read more >
Queries and Mutations - GraphQL
Oh, one more thing - the query above is interactive. That means you can change it as you like and see the new...
Read more >
How to update the Apollo Client's cache after a mutation
Basically, you should make your mutation results have all of the data necessary to update the queries previously fetched. That's also why is...
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 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