Update store after mutation (create) unclear how to handle

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?

[stale[bot]]

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!

[lucfranken]

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.