Apollo-client: `writeFragment` writes to cache, but query doesn't read from it

Created on 14 Mar 2019  路  4Comments  路  Source: apollographql/apollo-client

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 withwriteFragment`.

                    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 :)

鉁嶏笍 working-as-designed 馃彄 awaiting-response

Most helpful comment

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.

All 4 comments

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.

@gomesalexandre I think @luciannojunior is right: using client.writeFragment instead of store.writeFragment should ensure that broadcastQueries gets called after the fragment is written to the cache. Please feel free to reopen this issue if that doesn't fix the problem!

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

wait what? so cache.writeFragment doesn't broadcast its writes?

Was this page helpful?
0 / 5 - 0 ratings