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.

Wrapping client mutate function

See original GitHub issue

Feature Request

Currently, when calling mutate functions users will need to pass generated optimistic response and also supply global cache updates. UX of that approach is quite restrictive and prevents developers from taking things even further.

client.mutate({ 
     ...devOptions, 
     *optimisticResponse: createOptimisticResponse()*
     update: updateFn
})

Proposal

Provide wrapper for client.mutate that will provide extra capabilities:

Variant 1

Example parameters for wrapped mutate function:

client.mutate(...devOptions, 
  // Ability to control how offline state is reported
  offlineStrategy: 'failWhenOffline', 
  // Add ability to update Query cache automatically
  updateQuery: "getItems",
  // Adds automatic optimistic response based on payload
  generateOptimisticResponse: "getItems")
}

Variant 2

client.mutate(...devOptions,
  // Supplies argument that will be used to build 
  // Optimistic response and query Updates
  // Devs will be able to override them by 
  // supplying original parameters to function. 
  affectedQueries: ["getItems"]
  // Many other arguments possible
}

Function internally can

  • Check if we are offline online
  • For offline it will save changes locally
  • Register update functions that will be triggered to see optimistic responses.
  • Allow providing sensible defaults and better support for offline that is not limited to Apollo Link/Apollo client API.

Pros/Cons

Pros

Doing this will give us many benefits:

  • Awesome UX and Offline support out of the box.
  • Simplify entire implementation (no holding mutations etc.)
  • Ability to work with other clients depending on the community interest (not only Apollo)
  • Ability to autogenerate cache updates (update fn) if dev did not supply them
  • Ability to autogenerate optimisticReponse if it was not supplied
  • Ability to supply extra parameters. For example, we can check if the client is offline and then return result instantly

Cons

  • A custom client without the ability to reuse links inside Offline Link will no longer be sufficient to integrate that with other projects.

Alternatives

Keep existing implementation without the wrapper and provide a toolbox that will generate some parameters:

const offlineArguments = offlineHelper({affectedQueries}
client.mutate(...devOptions, ...offlineArguments)

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
ntzioliscommented, Apr 15, 2019

Totally see the usefulness of this. that said, given the fluid state of graphql ecosystem I would wait a little longer before going down the path of a custom client while still providing a way to reduce boilerplate code by:

  • Exposing the offlineHelper method as you described for people that wanne do it manually
  • as well as add an additional medhod to the client ala client.mutateWithOffline() that internally calls the above helper method for people that wanne reduce boilerplate

Any future refactoring necessary for users of this lib would be pretty straight forward should you decide to go down the path fop a custom client lateron.

1reaction
evelantcommented, Apr 22, 2019

I also think @ntziolis has a good suggestion. Exposing an optional method to reduce boilerplate sounds great.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Mutations in Apollo Client - Apollo GraphQL Docs
A mutate function that you can call at any time to execute the mutation ... Remember to wrap GraphQL strings in the gql...
Read more >
javascript - How to wrap GraphQL mutation in Apollo client ...
Wrapping it up with a Mutation component should work. Try something like this: class ApprovalChain extends Component { render() { return ...
Read more >
Wrapping React Query's useMutation (A Use Case for ...
React Query is a library for fetching and mutating server state via React hooks. In addition to the perk of caching, it also...
Read more >
Make Apollo Client Pretty by Wrapping It Up! - Medium
Apollo Client is an amazing way to use your GraphQL endpoint to get the data you need for a given component, but if...
Read more >
mutate function leaves data and variables un-typed. #2795
apollo-client.mutate is virtually un-typed (e.g. data and variables in typescript). The types that need parameterized adjustments cross ...
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