MENU


Basic Update

Relay stores inmemory normalized GraphQL data, which accumulates as queries are made throughout usage. Regard it as a local database of GraphQL data. When records are updated, any components affected by the updated data will be notified and re-rendered with the updated data.

Below, clicking the button changes 'student' to 'Andrew'. Notice how the variable 'newName' is passed to GraphQL.
RESETRUNFULL
// App.jsimport './App.css';import React,{useState, Suspense} from 'react';import graphql from 'babel-plugin-relay/macro';import {RelayEnvironmentProvider, useMutation} from 'react-relay/hooks';import RelayEnvironment from './RelayEnvironment';function App(props) {
  const [commit, isInFlight] = useMutation(graphql
                            `mutation AppMutation($newName:String) {setName(nn:$newName)}`);
  const [name, setN] = useState("student");
  if (isInFlight) return <h3>updating...</h3>;
  return (
    <button onClick={() => {commit({variables: {newName: "Andrew" },
                                                         onCompleted: d=>{setN(d.setName);}});}}
    >{name}</button>
  );}function AppRoot(props) {
  return (
    <RelayEnvironmentProvider environment={RelayEnvironment}>
      <Suspense fallback={'Loading...'}>
        <App />
      </Suspense>
    </RelayEnvironmentProvider>
  );}export default AppRoot;

Tip Tip Tip : When using useQueryLoader() / loadQuery() to fetch data, you may need to call loadQuery() again in order to obtain the most up-to-date data from the server.

( A full coverage of GraphQL and Relay is beyond the scope of this book. )