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.

Deleting data with `writeFragment`

See original GitHub issue

Intended outcome: I’d like to be able to selectively remove data from the query store via the imperative API (i.e. client.writeFragment and client.writeQuery). Something like:

client.writeFragment({
  fragment,
  id,
  data: null
});

or

client.writeFragment({
  fragment,
  id,
  data: {}
});

Is there a way to accomplish this?

Actual outcome: If I try either of the two above constructions, the data still exists and can be read back out. You can see this in this example.

How to reproduce the issue: Here’s a complete code example:

import ApolloClient from 'apollo-client';
import gql from 'graphql-tag';

const client = new ApolloClient.ApolloClient({
  dataIdFromObject(obj) { return obj.id; },
  addTypeName: true
});
const fragment = gql`fragment update on person{ 
  id
  __typename
}`;
const id = 'person-01';
const __typename = '__typename';

client.writeFragment({
  fragment,
  id,
  data: {
    id,
    __typename
  }
});
client.readFragment({
  fragment,
  id
}); // should get { __typename: '__typename', id: 'person-1' }

client.writeFragment({
  fragment,
  id,
  data: null
});
client.readFragment({
  fragment,
  id
}); // fragment is still there; I'd expect `null`

Perhaps there is just some syntax that I’m missing?

What I’ve done currently—and am really not a fan of—is take the old mutation delete reducers code and stick it in my code base as follows:

    const state = client.store.getState().apollo;
    state.data = mutationResultDeleteReducer(state.data, {
      behavior: {
        dataId: action.id
      }
    });

That seems to work, but is obviously quite fragile in terms of the store format, etc.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:21
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

19reactions
skoschcommented, Apr 26, 2017

Would it be an option (among others) to provide a simple way to delete by object id? That would probably cover the most common use case.

0reactions
helfercommented, May 2, 2017

@skosch it isn’t possible right now, but we’re thinking of adding an API for doing invalidations and deleting data in the store. Let’s continue all discussions related to that on #621

Read more comments on GitHub >

github_iconTop Results From Across the Web

Reading and writing data to the cache - Apollo GraphQL Docs
writeFragment returns a reference to the existing object. Example: Deleting a field from a cached object. A modifier function's optional second parameter is...
Read more >
Using writeFragment to Update a Field Belonging to an Object?
After quite a few hours of study, I learned a lot about fragments! I got it working. Here are the updated fragment and...
Read more >
Apollo Client Delete Fragment | RunKit
Apollo Client Delete Fragment. node v6.17.1 ... client.writeFragment({. 18. fragment,. 19. id,. 20. data: { ... Now, how do I delete that fragment...
Read more >
Reading and writing data to the cache - Client (React)
Any changes you make to cached data with writeQuery and writeFragment are not ... the values of individual cached fields, or even delete...
Read more >
Optimizing list item deletion with Apollo's @client directive and ...
Removing an item from a list in Apollo cache while keeping a smooth optimstic ... When deleting a single item from a remote...
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