16 - The Relay store: local updates (bonus)

Relay data lives in a normalized store: a map from record id to record. Usually it is written by query and mutation responses, but you can also write to it locally, without talking to the server.

Open the Relay Store tab to follow the changes.

Exercise

Shout: change the content of the Post record to UPPERCASE using commitLocalUpdate (no mutation, no request)
Hide: remove the post from the App_posts connection locally with ConnectionHandler.deleteNode
Inspect store (App.tsx): count how many records of type Post exist in the store using environment.getStore().getSource()

After hiding a post, inspect the store again: is the Post record still there? Why?

Extras

add an "Undo" button that inserts the hidden post back (ConnectionHandler.createEdge + insertEdgeBefore)
what happens to the local changes if the query is fetched again from the network?

Next: @required & error boundaries →

auto run

Loading editor…

localhost:7500 · in-browser GraphQL server

latency

Checks verify your solution against the running app.

○Renders 5 posts
○Shout updates the Post record in the store, without a request
○Hide removes the post from the App_posts connection locally
○Inspect store counts the Post records (hidden ones included)