Manage Local State using Apollo by extending the GraphQL Schema on the Client

Share this video with your friends

With the introduction of apollo-link-state Apollo for the first time introduced a way to manage local state through GraphQL queries and mutations. This can be achieved using the @client directive.

In this lesson we will leverage this feature to keep track of starred recipes and store the information in the localStorage.

Syarif Banjar

~ 5 years ago

Is the recipe actually updated on the server without returning a response?, what if the localStorege data has been deleted?

Nik Graf(instructor)

~ 5 years ago

@Shareef the favorite state is only stored in localStorage. If it is wiped the information is gone as well as it's not stored on any server. Depending on your requirements this might not what you want and a mutation to persist the data might be better.

Alec

~ 5 years ago

@Nik what tool do you use here to get the star font / emoji in vscode?

umut

~ 5 years ago

Thanks Nik, fast and nice explanation. Very good example of usage in a short time!

janppires

~ 5 years ago

hi @Alec, google search "macos emoji" for the emoji list.

Nik Graf(instructor)

~ 5 years ago

@Nik what tool do you use here to get the star font / emoji in vscode?

Ctrl + Cmd + Space opens the selector

Bress B

~ 5 years ago

Do resolvers have to be created for each localstorage state? In terms of remote querying remote data, are resolvers defined behind the scenes by Apollo?

Also since the example resolvers is passed into clientState of client object, does this mean that all properties/fields resolvers passed into clientState are designated as localStorage only? Thank you

Overall I find this video very confusing as you're introducing quite a few concepts without providing sufficient backgrounder.

Nik Graf(instructor)

~ 5 years ago

@Bress yes, each local state part of the query needs a resolved. In a resolver you can return more complex data structures (which must map the query structure).

Sorry for introducing too many new concepts. You could check out the new official docs here: https://www.apollographql.com/docs/react/essentials/local-state/ I hope this clarifies things.