06 - mutation updater

Learn how to use updater to update your Relay Store without using a refetch query after a mutation.

Exercise

add an updater to the PostCommentCreate mutation (comment/PostCommentCreateMutation.tsx) to update the Relay Store properly: the new comment edge should be added to the PostComments_comments connection of the post

Write a comment in the first post and send it: it should show up in the comment list without a refetch.

use an optimisticUpdater to provide a fast feedback to the user
show the comments count and update it (the mutation already returns post { commentsCount })

const recordProxy = store.get(globalId);

const newEdge = store.getRootField('PostCommentCreate').getLinkedRecord('commentEdge');

import { ROOT_ID } from 'relay-runtime';

const connection = ConnectionHandler.getConnection(parentProxy, connectionName);

ConnectionHandler.insertEdgeBefore(connection, edge);
ConnectionHandler.insertEdgeAfter(connection, edge);

const node = store.create(id, typename);

node.setValue(value, propertyName);

node.setLinkedRecord(recordProxy, propertyName);

auto run

Loading editor…

localhost:7500 · in-browser GraphQL server

latency

Checks verify your solution against the running app.