`writeFragment` writes to cache, but query doesn't read from it

Hi everyone, I’ve been struggling with this one for a few days, though one ! I would like to know if this is expected behaviour or if there is something I’m missing here, or even a bug.

From within the update method of a mutation in a component, let’s call it <ComponentA />, I update the cache with writeFragment`.

                    store.writeFragment({
                      id: this.props.id,
                      fragment: SongData,
                      data: {
                        __typename: 'SongData',
                        song_id: songId,
                        length,
                      },
                    });

And SomeFragment looks like this :

                fragment SongData on Song {
                  __typename
                  song_id
                  length
                }

I then need this data from ComponentB /> and ComponentC />. The first has a query matching exactly this, so I can call writeQuery() instead and it works fine, data gets in the cache and I can access from this component using either cache-first, cache-and-network or cache-only fetch policy.

However, ComponentC /> cannot seem to get the data from the cache and this has been confirmed by using cache-first.

The thing is the query is quite large, it’s not just fragment SongData on Song. It also gets many other fields, amongst which a songs {} field containing a list of Song items.

I’ve tried everything and can’t seem to update one particular item in cache. I’ve also tried using a very specific dataidFromObject including typename method just in case I wasn’t targeting id properly, without success.

What are my solutions here ? ComponentA doesn’t have access to the full data that would allow to run writeQuery instead and write the whole query I’m using in ComponentC unfortunately.

On a higher level, what I’m trying to do here is to :

1. Get this specific item only from cache initially
2. Once I get the response from the GraphQL server, re-render with the whole list of items (and the cache-and-network policy, and cache-only for testing).

I usually wouldn’t post for issues but after a failing attempt in SO and a full week of reading related issues, I think this has its place here !

For reference, I am using https://github.com/trojanowski/react-apollo-hooks but this shouldn’t matter as it is just a wrapper

Thanks in advance for everyone helping 😃

[lucis]

Try using these methods directly in the ’ client’ instance. I’ve had the same problem using cache.writeData, and when switched to client.writeData it worked. Looked it up on the code, and using the latter, Apollo will check if any query is subscribed on that data.

[nafisholeh]

Thanks a lot, @luciannojunior your hints lead me to end my suffering