Add a `GraphQL.reload()` API

[jaydenseric]

A GraphQL.reload() API would trigger a GraphQL reload event, but not actually delete any cache like GraphQL.reset() does. It would have the same ability to preserve the cache for a particular operation via an exceptCacheKey option.

The useGraphQL() React hook option resetOnLoad will need rethinking. Although we could just add another reloadOnLoad option, it doesn't make sense that a user could set both options to true at once.

Use cases:

• GraphQL.reset():
  • The user logs out, so immediately scrub all their data from the cache. Parts of the page with queries that load on mount, such as the header, will revert to a blank loading status while fresh data is loaded. The exceptCacheKey option is used to ensure that the mutation payload is preserved so that the logout success status and message stays visible to the user.
• GraphQL.reload():
  • A mutation has happened where parts of the cache could be stale (e.g. the user changed their name), so you want all queries to reload optimistically. They render with their old cache while loading fresh cache in the background, instead of reverting to a blank loading state.

[chrischen]

* GraphQL.reload() Does this imply that there is not currently a way to handle updating the cache after a mutation?

[jaydenseric]

@chrischen the idea is to have an API that does not require problematic manual cache edits.

Before the React hooks update, GraphQL.reset() was less disruptive and sort of worked like the proposed GraphQL.reload() because of how the Query components managed cache in local state.

[chrischen]

It seems apollo has partial automatic cache updates (if an ID matches up in the response). If you won't go this way, what's the way to update the cache manually or do I have to do a reset() to refetch?

[jaydenseric]

Apollo makes a lot of assumptions, and their automatic cache updates require manual intervention in a lot of situations. For example, imagine you run a createSale mutation. If you have a grossSalesInCurrency query, it won't be automatically refreshed since it doesn't involve the Sale ID or type. Apollo also can have problems with lists not refreshing.

After a mutation the best thing to do is reset the cache so all the mounted components refetch their data.

[chrischen]

You can also always call client.resetStore() in apollo, but they give you some ways to do optimizations that require manual intervention, but it's not required.

You can supply a refetchQueries list when mutating to selectively refetch, if you're not willing to do manual cache changes. https://www.apollographql.com/docs/react/advanced/caching#after-mutations

I think the reload() method should be able to take an optional list of queries to selectively reload queries.

[jaydenseric]

Keep in mind that useGraphQL has a loadOnReset option which defaults to true; if you don't want an operation to load on reset (perhaps for mutations loaded on demand) you can opt-out.

The GraphQL.reload() method will have an exceptCacheKey option.

[chrischen]

Keep in mind that useGraphQL has a loadOnReset option which defaults to true; if you don't want an operation to load on reset (perhaps for mutations loaded on demand) you can opt-out.

But how can I use this to specify stale queries as a result of a specific mutation?

The GraphQL.reload() method will have an exceptCacheKey option. I would have to keep track of cacheKeys?

[jaydenseric]

how can I use this to specify stale queries as a result of a specific mutation?

That's the beauty of the API; you don't have to. Cache is automatically reloaded everywhere. A component that triggers a mutation should not have to be aware of a bunch of queries used elsewhere in unrelated components.

[chrischen]

if you don't want an operation to load on reset (perhaps for mutation loaded on demand) you can opt-out.

Do you mean that mutation operations get loaded on reset by default?

Thanks! Chris

---

From: Jayden Seric notifications@github.com Sent: Tuesday, February 26, 2019 12:19 PM To: jaydenseric/graphql-react Cc: chrischen; Mention Subject: Re: [jaydenseric/graphql-react] Add a GraphQL.reload() API (#26)

Keep in mind that useGraphQL has a loadOnReset option which defaults to true; if you don't want an operation to load on reset (perhaps for mutation loaded on demand) you can opt-out.

The GraphQL.reload() method will have an exceptCacheKey option.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/jaydenseric/graphql-react/issues/26#issuecomment-467288754, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AAGsPo8sR59hesGiTblBcpy_QN66dcSzks5vRLXDgaJpZM4bIphp.

[jaydenseric]

@chrischen please read the useGraphQL() docs. The API is not different for queries vs mutations. It is up to you how you want a particular GraphQL operation to behave.

[chrischen]

What do you think of the onMutation hook from https://github.com/arackaf/micro-graphql-react

You define entity types in the query to watch for changes on:

<GraphQL query={{ books: buildQuery(BOOKS_QUERY, { page: props.page }, { onMutation: hardResetStrategy("Book") }) }}>