분류 Reactjs

Relay .... v6.0.0

컨텐츠 정보

  • 조회 395 (작성일 )

본문

소개


Relay는 GraphQL 기반의 데이터 중심 React 애플리케이션을 구축하기 위한 JavaScript 프레임 워크로, 사용하기 쉽고 확장 가능하며 무엇보다 성능이 뛰어나도록 설계되었습니다. 릴레이는 정적 쿼리와 사전 코드 생성을 통해 이를 수행합니다.


React는 뷰를 컴포넌트로 정의하여 모든 컴포넌트가 UI의 일부를 렌더링 하는 역할을 합니다. 다른 구성 요소를 구성하는 것은 복잡한 UI를 작성하는 방법입니다. 각 React 컴포넌트는 작성된 컴포넌트의 내부 작동을 알 필요가 없습니다.


릴레이 커플 링은 GraphQL과 반응하고 캡슐화 아이디어를 더욱 발전시킵니다. 구성 요소가 필요한 데이터를 지정하고 릴레이 프레임 워크가 데이터를 제공 할 수 있습니다. 이것은 내부 구성 요소의 데이터 요구를 불투명하게 하고 그 요구를 구성 할 수 있게 합니다. 앱에 필요한 데이터에 대해 생각하면 구성 요소에 맞게 현지화 되므로 어떤 필드가 필요하거나 더 이상 필요하지 않은지 쉽게 추론 할 수 있습니다.


전제 조건 


React 


릴레이는 React 애플리케이션에 대한 기본 지원 바인딩을 사용한 데이터 관리를 위한 프레임 워크이므로 이미 React에 익숙하다고 가정합니다.


GraphQL 


또한 GraphQL에 대한 기본적인 이해가 있다고 가정합니다. 


릴레이 사용을 시작하려면 다음이 필요합니다.


GraphQL 스키마 


응용 프로그램에 필요한 데이터를 가져 오는 방법을 알고 있는 관련 해결 방법 세트가 있는 데이터 모델에 대한 설명입니다.


GraphQL은 광범위한 데이터 액세스 패턴을 지원하도록 설계되었습니다. 응용 프로그램 데이터의 구조를 이해하려면 릴레이에서 스키마를 정의 할 때 특정 규칙을 따라야 합니다. 이것들은 GraphQL 서버 사양에 문서화 되어 있습니다.


  • npm의 graphql-js
    JavaScript를 사용하여 GraphQL 스키마를 빌드하기 위한 범용 도구
  • npm의 graphql-relay-js
    Relay와 원활하게 통합되는 방식으로 데이터와 돌연변이 간의 연결을 정의하는 JavaScript 도우미.

GraphQL 서버 


모든 서버는 스키마를 로드하고 GraphQL을 말할 수 있습니다. 우리의 는 Express를 사용합니다.


설치 및 설정 


설치 


yarn 또는 npm을 사용하여 React and Relay를 설치하십시오


yarn add react react-dom react-relay 


단일 구성 파일로 릴레이 설정 


아래의 babel-plugin-relay 및 relay-compiler 구성은 relay-config 패키지를 사용하여 단일 구성 파일을 사용하여 적용 할 수 있습니다. 

한 곳에서 모든 릴레이 구성을 통합하는 것 외에도 다른 툴링은 이를 사용하여 제로 구성 설정을 제공 할 수 있습니다 (예 : vscode-apollo-relay).


패키지를 설치하십시오 :


yarn add --dev relay-config 


구성 파일을 작성하십시오.


// relay.config.js module.exports = { // ... // Configuration options accepted by the `relay-compiler` command-line tool and `babel-plugin-relay`. src: "./src", schema: "./data/schema.graphql", exclude: ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"], } 


babel-plugin-relay 설정 


Relay Modern은 GraphQL을 런타임 아티팩트로 변환하려면 Babel 플러그인이 필요합니다.


yarn add --dev babel-plugin-relay graphql 


.babelrc 파일 플러그인 목록에 "relay"를 추가하십시오.


{ "plugins": [ "relay" ] } 


graphql 템플릿 리터럴이 올바르게 변환되도록 하려면 "릴레이"플러그인을 다른 플러그인이나 사전 설정보다 먼저 실행해야 합니다. 이 주제에 대한 Babel의 문서를 참조하십시오.


또는 babel-plugin-relay를 사용하는 대신 babel-plugin-macros와 함께 Relay를 사용할 수 있습니다. babel-plugin-macros를 설치하고 Babel 설정에 추가 한 후 :


const graphql = require('babel-plugin-relay/macro'); 


babel-plugin-relay를 추가로 구성해야 하는 경우 (예 : compat 모드 사용) 옵션을 여러 가지 방법으로 지정하면 됩니다.


예를 들면 다음과 같습니다.


// babel-plugin-macros.config.js module.exports = { // ... // Other macros config relay: { compat: true, }, } 


릴레이 컴파일러 설정 


Relay의 사전 컴파일에는 얀 또는 npm을 통해 설치할 수 있는 Relay Compiler가 필요합니다.


yarn add --dev relay-compiler 


bin 스크립트 릴레이 컴파일러가 node_modules 폴더에 설치됩니다. package.json 파일에 스크립트를 추가하여 yarn / npm 스크립트에서 이를 실행하는 것이 좋습니다.


"scripts": { "relay": "relay-compiler --src ./src --schema ./schema.graphql" } 


또는 jsx를 사용하는 경우 :


"scripts": { "relay": "relay-compiler --src ./src --schema ./schema.graphql --extensions js jsx" } 


그런 다음 애플리케이션 파일을 편집 한 후 릴레이 스크립트를 실행하여 컴파일 된 새 아티팩트를 생성하십시오.


yarn run relay 


또는 --watch 옵션을 전달하여 소스 코드의 파일 변경을 감시하고 컴파일 된 아티팩트를 자동으로 다시 생성 할 수 있습니다 (참고 : watchman이 설치되어 있어야 함).


yarn run relay --watch 


자세한 내용은 Relay Compiler 문서를 확인하십시오.


자바 스크립트 환경 요구 사항 


NPM에 배포 된 Relay Modern 패키지는 널리 지원되는 ES5 버전의 JavaScript를 사용하여 가능한 많은 브라우저 환경을 지원합니다.


그러나 Relay Modern은 최신 JavaScript 전역 유형 (Map, Set, Promise, Object.assign)이 정의 될 것으로 예상합니다. 아직 기본적으로 제공하지 않는 구형 브라우저 및 장치를 지원하는 경우 번들 애플리케이션에 core-js 또는 @babel/polyfill과 같은 전역 폴리 필을 포함 시키는 것을 고려하십시오.


이전 브라우저를 지원하기 위해 core-js를 사용하는 Relay의 폴리 필 환경은 다음과 같습니다.


require('core-js/es6/map'); require('core-js/es6/set'); require('core-js/es6/promise'); require('core-js/es6/object'); require('./myRelayApplication'); 


빠른 시작 가이드 


이 안내서에서는 예제 할 일 목록 앱을 참조하여 Relay의 작동 방식과 사용 방법에 대한 간략한 개요를 제공합니다. 

보다 철저한 설명서를 보려면 가이드 및 API 섹션을 확인하십시오.


목차 :

Setup 


시작하기 전에 전제 조건 및 설치 및 설정 안내서를 확인하십시오. 전제조건에서 언급 했듯이 GraphQL 서버와 스키마를 설정했는지 확인해야 합니다.


다행스럽게도 이 예제 할 일 목록 앱을 사용할 것입니다.이 앱에는 이미 사용할 수 있는 서버스키마가 있습니다.


# From schema.graphql # https://github.com/relayjs/relay-examples/blob/master/todo/data/schema.graphql type Query { viewer: User # Fetches an object given its ID node( # The ID of an object id: ID! ): Node } 


또한 Javascript 코드 예제 내에서 Flow를 사용할 것입니다. 프로젝트에서 Flow을 설정하는 것은 선택 사항이지만 완료를 위해 예제에 Flow을 포함시킵니다.


Relay Environment 


화면에서 픽셀 렌더링을 시작하려면 릴레이 환경을 통해 릴레이를 구성해야 합니다. 환경은 Relay가 작동하기 위해 필요한 구성, 캐시 스토리지 및 네트워크 처리를 하나로 묶습니다.


예제의 목적 상, 기존 GraphQL 서버와 통신하도록 환경을 구성하려고 합니다.


import { Environment, Network, RecordSource, Store, } from 'relay-runtime'; function fetchQuery( operation, variables, ) { return fetch('/graphql', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ query: operation.text, variables, }), }).then(response => { return response.json(); }); } const environment = new Environment({ network: Network.create(fetchQuery), store: new Store(new RecordSource()), }); export default environment; 


릴레이 환경에는 최소한 Store네트워크 계층이 필요합니다. 위의 코드는 Store의 기본 구현을 사용하며 간단한 fetchQuery 함수를 사용하여 서버에서 GraphQL 쿼리를 가져 오는 네트워크 계층을 만듭니다.


일반적으로 앱에서 단일 환경을 원하므로 이 환경을 모듈에서 단일 인스턴스로 내보내 앱 전체에서 액세스 할 수 있습니다.


Rendering GraphQL Queries 


Relay Environment를 구성 했으므로 쿼리 페치 및 화면에서 데이터 렌더링을 시작할 수 있습니다. GraphQL 쿼리에서 데이터를 렌더링하기 위한 진입 점은 react-relay에서 제공하는 QueryRenderer 구성 요소입니다.


시작하려면 화면에 사용자 ID를 렌더링 한다고 가정 해 봅시다. 스키마에서 뷰어 필드를 통해 현재 사용자를 얻을 수 있다는 것을 알고 있으므로 현재 사용자 ID를 가져 오기 위한 샘플 쿼리를 작성해 보겠습니다.


query UserQuery { viewer { id } } 


이제 위 쿼리를 가져 와서 렌더링 하는 구성 요소를 만드는 데 무엇이 필요한지 살펴 보겠습니다.


// App.js import React from 'react'; import {graphql, QueryRenderer} from 'react-relay'; const environment = /* defined or imported above... */; export default class App extends React.Component { render() { return ( <QueryRenderer environment={environment} query={graphql` query UserQuery { viewer { id } } `} variables={{}} render={({error, props}) => { if (error) { return <div>Error!</div>; } if (!props) { return <div>Loading...</div>; } return <div>User ID: {props.viewer.id}</div>; }} /> ); } } 


우리의 응용 프로그램은 다른 React 구성 요소와 마찬가지로 위 코드에서 QueryRenderer를 렌더링 하지만 전달되는 소품에서 무슨 일이 일어나고 있는지 살펴 보겠습니다.


  • 우리는 앞서 정의한 환경을 통과하고 있습니다.
  • GraphQL 쿼리를 정의하기 위해 graphql 함수를 사용하고 있습니다. graphql은 런타임에 절대 실행되지 않지만 릴레이 컴파일러가 릴레이 작동에 필요한 런타임 아티팩트를 생성하는 데 사용하는 템플리트 태그입니다. 우리는 지금 이것에 대해 걱정할 필요가 없습니다. 자세한 내용은 GraphQL in Relay 문서를 확인하십시오.
  • 빈 변수 세트를 전달하고 있습니다. 다음 섹션에서 변수를 사용하는 방법을 살펴 보겠습니다.
  • 렌더링 함수를 전달하고 있습니다. 코드에서 알 수 있듯이 Relay는 오류가 발생했는지 또는 여전히 쿼리를 가져 오는지에 대한 정보를 제공합니다. 모든 것이 성공하면 요청한 데이터는 쿼리에 지정된 것과 같은 모양으로 소품 내에서 사용할 수 있습니다.

이 앱을 실행하려면 먼저 릴레이 컴파일러를 사용하여 쿼리를 컴파일 해야 합니다. 설치 및 설정에서 설정을 가정하면 실 릴레이를 실행할 수 있습니다.


QueryRenderer에 대한 자세한 내용은 문서를 확인하십시오.


Using Query Variables 


우리 앱에서 다른 사용자의 데이터를 볼 수 있기를 원한다고 가정 해 봅시다. 따라서 ID로 사용자를 쿼리해야 합니다. 스키마에서 ID가 주어진 노드를 쿼리 할 수 ​​있다는 것을 알고 있으므로 매개 변수화 된 쿼리를 작성하여 사용자를 ID별로 가져 오도록 하겠습니다.


query UserQuery($userID: ID!) { node(id: $userID) { id } } 


이제 QueryRenderer를 사용하여 위의 쿼리를 가져 오는 방법을 살펴 보겠습니다.


// UserTodoList.js // @flow import React from 'react'; import {graphql, QueryRenderer} from 'react-relay'; const environment = /* defined or imported above... */; type Props = { userID: string, }; export default class UserTodoList extends React.Component<Props> { render() { const {userID} = this.props; return ( <QueryRenderer environment={environment} query={graphql` query UserQuery($userID: ID!) { node(id: $userID) { id } } `} variables={{userID}} render={({error, props}) => { if (error) { return <div>Error!</div>; } if (!props) { return <div>Loading...</div>; } return <div>User ID: {props.node.id}</div>; }} /> ); } } 


위의 코드는 이전 예제와 매우 유사한 작업을 수행합니다. 그러나 이제 변수 prop를 통해 $userID 변수를 GraphQL 쿼리에 전달합니다. 여기에는 몇 가지 중요한 의미가 있습니다.

  • userID가 컴포넌트가 가져 오는 소품 인 경우 언제든지 상위 컴포넌트에서 새 userID를 받을 수 있습니다. 이런 일이 발생하면 새 변수가 QueryRenderer로 전달되어 $userID에 대한 새 값으로 쿼리를 자동으로 다시 가져옵니다.
  • $userID 변수는 이제 해당 쿼리의 어느 곳에서나 사용할 수 있습니다. 조각을 사용할 때 명심해야 합니다.

쿼리를 업데이트 했으므로 얀 릴레이를 실행하는 것을 잊지 마십시오.


Using Fragments 


쿼리를 정의하고 가져 오는 방법을 알았으므로 실제로 할 일 목록 작성을 시작하겠습니다.


먼저 맨 아래부터 시작하겠습니다. 주어진 할 일의 텍스트와 완료된 상태를 단순히 표시하는 컴포넌트를 렌더링 한다고 가정합니다.


// Todo.js import React from 'react'; type Props = { todo: { complete: boolean, text: string, }, }; export default class Todo extends React.Component<Props> { render() { const {complete, text} = this.props.todo; return ( <li> <div> <input checked={complete} type="checkbox" /> <label> {text} </label> </div> </li> ); } } 


스키마에서 Todo 유형에 대해이 데이터를 쿼리 할 수 ​​있음을 알고 있습니다. 그러나 각 할 일 항목에 대해 별도의 쿼리를 보내지 않아도 됩니다. 기존 REST API보다 GraphQL을 사용하는 목적을 상실합니다. QueryRenderer 쿼리에서 직접 이러한 필드를 직접 쿼리 할 수 ​​있지만 재사용 성이 떨어집니다. 다른 쿼리의 일부로 동일한 필드 집합을 쿼리 하려면 어떻게 해야 합니까? 또한 쿼리 할 데이터가 필요한 구성 요소를 알 수 없습니다. 이는 릴레이가 직접 해결하려고 하는 문제입니다.


대신 재사용 가능한 조각을 정의하여 유형에 대한 필드 세트를 정의하고 필요할 때마다 쿼리 내에서 필드를 재사용 할 수 있습니다.


fragment TodoItemFragment on Todo { complete text } 


그런 다음 컴포넌트는 이 조각을 사용하여 Todo GraphQL 유형에 대한 데이터 종속성을 선언 할 수 있습니다.


// Todo.js // OPTIONAL: Flow type generated after running `yarn relay`, defining an Object type with shape of the fragment: import type {Todo_todo} from './__generated__/Todo_todo.graphql'; import React from 'react'; import {graphql, createFragmentContainer} from 'react-relay' type Props = { todo: Todo_todo } class Todo extends React.Component<Props> { render() { const {complete, text} = this.props.todo; return ( <li> <div> <input checked={complete} type="checkbox" /> <label> {text} </label> </div> </li> ); } } export default createFragmentContainer( Todo, // Each key specified in this object will correspond to a prop available to the component { todo: graphql` # As a convention, we name the fragment as '<ComponentFileName>_<propName>' fragment Todo_todo on Todo { complete text } ` }, ) 


위의 코드는 구성 요소를 데이터 종속성과 함께 배치하는 릴레이의 가장 중요한 원칙 중 하나를 강조합니다. 이것은 몇 가지 이유에서 유리합니다.


  • 앱에서 필요한 데이터를 가져 오는 쿼리를 검색하지 않고도 주어진 구성 요소를 렌더링 하는 데 필요한 데이터를 한눈에 알 수 있습니다.
  • 결과적으로 구성 요소는 렌더링 하는 쿼리에서 구성 요소가 분리됩니다. 렌더링 하는 쿼리를 업데이트하거나 다른 구성 요소를 중단 할 염려 없이 구성 요소의 데이터 종속성을 변경할 수 있습니다.

릴레이의 원리에 대한 자세한 내용은 Thinking in Relay 안내서를 확인하십시오.


진행하기 전에 yarn relay로 릴레이 컴파일러를 실행하는 것을 잊지 마십시오.


Composing Fragments 


프래그먼트 컨테이너는 React 컴포넌트 일 뿐이므로 이와 같이 구성 할 수 있습니다. 다른 프래그먼트 컨테이너 내에서 프래그먼트 컨테이너를 재사용 할 수도 있습니다. 예를 들어, 할 일 목록을 렌더링 하는 TodoList 컴포넌트를 정의하는 방법과 모두 완료되었는지 여부를 살펴 보겠습니다.


// TodoList.js // OPTIONAL: Flow type generated after running `yarn relay`, defining an Object type with shape of the fragment: import type {TodoList_userTodoData} from './__generated__/TodoList_userTodoData.graphql'; import React from 'react'; import {graphql, createFragmentContainer} from 'react-relay'; type Props = { userTodoData: TodoList_userTodoData, } class TodoList extends React.Component<Props> { render() { const {userTodoData: {totalCount, completedCount, todos}} = this.props; return ( <section> <input checked={totalCount === completedCount} type="checkbox" /> <ul> {todos.edges.map(edge => <Todo key={edge.node.id} {/*We pass the data required by Todo here*/} todo={edge.node} /> )} </ul> </section> ); } } export default createFragmentContainer( TodoList, { userTodoData: graphql` # As a convention, we name the fragment as '<ComponentFileName>_<PropName>' fragment TodoList_userTodoData on User { todos( first: 2147483647 # max GraphQLInt, to fetch all todos ) { edges { node { id, # We use the fragment defined by the child Todo component here ...Todo_todo, }, }, }, id, totalCount, completedCount, } `, }, ); 


정의한 첫 번째 조각 컨테이너와 마찬가지로 TodoList는 조각을 통해 데이터 종속성을 선언합니다. 그러나 이 구성 요소는 Todo 구성 요소에 의해 이전에 정의 된 조각을 추가로 재사용 하고 하위 Todo 구성 요소 (예 : 조각 컨테이너)를 렌더링 할 때 적절한 데이터를 전달합니다.


프래그먼트 컨테이너를 구성 할 때 주의 해야 할 마지막 사항은 상위 컨테이너가 하위 컨테이너에서 정의한 데이터에 액세스 할 수 없다는 것입니다. 릴레이는 컴포넌트가 GraphQL 프래그먼트에서 구체적으로 요구하는 데이터에만 액세스 할 수 있도록 합니다. 이를 데이터 마스킹이라고 하며, 구성 요소가 종속성으로 선언하지 않은 데이터에 의존하지 않도록 하는 것이 의도적입니다.


Rendering Fragments 


이제 데이터 종속성을 선언하는 일부 구성 요소 (예 : 조각 컨테이너)가 있으므로 데이터를 실제로 가져오고 렌더링 할 수 있도록 QueryRenderer에 연결해야 합니다. 프래그먼트 컨테이너는 데이터를 직접 가져 오지 않습니다. 대신 컨테이너는 렌더링에 필요한 데이터 사양을 선언하고 릴레이는 렌더링 전에 이 데이터를 사용할 수 있음을 보장합니다.


이러한 프래그먼트 컨테이너를 렌더링 하는 QueryRenderer는 다음과 같습니다.


// ViewerTodoList.js import React from 'react'; import {graphql, QueryRenderer} from 'react-relay'; import TodoList from './TodoList' const environment = /* defined or imported above... */; export default class ViewerTodoList extends React.Component { render() { return ( <QueryRenderer environment={environment} query={graphql` query ViewerQuery { viewer { id # Re-use the fragment here ...TodoList_userTodoData } } `} variables={{}} render={({error, props}) => { if (error) { return <div>Error!</div>; } if (!props) { return <div>Loading...</div>; } return ( <div> <div>Todo list for User {props.viewer.id}:</div> <TodoList userTodoData={props.viewer} /> </div> ); }} /> ); } } 


자세한 내용은 Fragment Containers에 대한 문서를 확인하고 컨테이너의 고급 사용법에 대해서는 RefetchPagination에 대한 가이드를 확인하십시오.


Mutating Data 


데이터를 쿼리하고 렌더링 하는 방법을 배웠으므로 이제 데이터 변경으로 넘어 갑시다. 서버의 데이터를 변경하려면 GraphQL Mutations를 사용해야 합니다.

스키마에서 우리는 우리가 이용할 수 있는 약간의 돌연변이가 있다는 것을 알고 있으므로 주어진 할일 항목의 완전한 상태를 변경하기 위해 돌연변이를 작성하는 것으로 시작합시다 (즉, 완료로 표시 또는 표시 해제).


mutation ChangeTodoStatusMutation($input: ChangeTodoStatusInput!) { changeTodoStatus(input: $input) { todo { id complete } } } 


이 변이를 사용하면 변이의 결과로 일부 데이터를 다시 조회 할 수 있으므로 할 일 항목의 업데이트 된 완료 상태를 조회합니다.


Relay에서 이 돌연변이를 실행하기 위해 Relay의 commitMutation API를 사용하여 새로운 돌연변이를 작성합니다.


// ChangeTodoStatusMutation.js import {graphql, commitMutation} from 'react-relay'; // We start by defining our mutation from above using `graphql` const mutation = graphql` mutation ChangeTodoStatusMutation($input: ChangeTodoStatusInput!) { changeTodoStatus(input: $input) { todo { id complete } } } `; function commit( environment, complete, todo, ) { // Now we just call commitMutation with the appropriate parameters return commitMutation( environment, { mutation, variables: { input: {complete, id: todo.id}, }, } ); } export default {commit}; 


ChangeTodoStatusMutation.commit (...)을 호출 할 때마다 Relay는 서버로 돌연변이를 전송하고 응답을 수신하면 서버의 최신 데이터로 로컬 데이터 저장소를 자동으로 업데이트합니다. 또한 응답을 수신하면 Relay는 업데이트 된 데이터에 의존하는 모든 구성 요소 (예 : 컨테이너)가 다시 렌더링되도록합니다.

컴포넌트에서 이 돌연변이를 실제로 사용하기 위해 다음과 같은 방법으로 Todo 컴포넌트를 업데이트 할 수 있습니다.


// Todo.js // ... class Todo extends React.Component<Props> { // Add a new event handler that fires off the mutation _handleOnCheckboxChange = (e) => { const complete = e.target.checked; ChangeTodoStatusMutation.commit( this.props.relay.environment, complete, this.props.todo, ); }; render() { // ... } } // ... 


Optimistic Updates 


위의 예에서 서버에서 응답을 받을 때까지 구성 요소의 전체 상태가 업데이트 되고 다시 렌더링 되지 않으므로 사용자 경험이 향상되지 않습니다.


경험을 개선하기 위해 낙관적 업데이트를 수행하도록 돌연변이를 구성 할 수 있습니다. 낙관적 업데이트 란 서버로부터 성공적으로 응답을 받을 경우 예상되는 대로 로컬 데이터를 즉시 업데이트하는 것, 즉 돌연변이 요청이 성공할 경우 즉시 데이터를 업데이트하는 것을 의미합니다. 요청이 실패하면 업데이트를 롤백 할 수 있습니다.


Relay에는 낙관적 업데이트를 가능하게 하기 위해 commitMutation에 전달할 수 있는 몇 가지 옵션이 있습니다. ChangeTodoStatusMutation에서 어떻게 보이는지 봅시다 :


// ChangeTodoStatusMutation.js // ... function getOptimisticResponse(complete, todo) { return { changeTodoStatus: { todo: { complete: complete, id: todo.id, }, }, }; } function commit( environment, complete, todo ) { // Now we just call commitMutation with the appropriate parameters return commitMutation( environment, { mutation, variables: { input: {complete, id: todo.id}, }, optimisticResponse: getOptimisticResponse(complete, todo), } ); } export default {commit}; 


위의 가장 간단한 경우, 우리는 optimisticResponse 옵션을 전달하면 됩니다. 이것은 mutistic response payload와 같은 모양을 가진 객체를 참조해야 합니다. 이 옵션을 전달하면 Relay는 로컬 데이터를 낙관적 응답으로 즉시 업데이트 한 다음 실제 서버 응답으로 업데이트하거나 오류가 발생하면 롤백 합니다.


실제 쿼리 및 응답 페이로드는 코드에서 선택한 것과 정확히 같은 모양이 아닐 수 있습니다. 간혹 컴파일 단계에서 릴레이가 추가 필드를 추가하고 낙관적 응답에 이 필드를 추가해야 하기 때문입니다. 예를 들면 다음과 같습니다.

  • 캐싱 목적으로 유형에 존재하는 경우 릴레이는 id 필드를 추가합니다.
  • 유형이 공용체 또는 인터페이스 인 경우 릴레이는 __typename 필드를 추가합니다.

네트워크 요청 또는 응답을 검사하여 정확한 모양을 볼 수 있습니다.


Updating local data from mutation responses 


기본적으로 Relay는 돌연변이 페이 로드가 참조하는 레코드의 필드를 업데이트합니다 (예 : 할 일). 그러나 이것은 가장 간단한 경우입니다. 경우에 따라 로컬 데이터를 업데이트하는 것은 레코드의 필드를 업데이트하는 것만 큼 간단하지 않습니다.


예를 들어 항목 모음을 업데이트하거나 레코드를 완전히 삭제했을 수 있습니다. 이러한 고급 시나리오의 경우 릴레이를 사용하면 업데이트에 대한 전체 제어를 위한 구성 및 업데이트 프로그램 기능을 포함하여 서버 응답에서 로컬 데이터를 업데이트하는 방법을 제어 할 수 있는 옵션 세트를 전달할 수 있습니다.


돌연변이 및 업데이트에 대한 자세한 내용과 고급 사용 사례는 돌연변이 문서를 확인하십시오.


다음 단계 


이 가이드는 Relay API의 표면을 긁는 것입니다. 자세한 문서 및 안내서는 API 참조 및 안내서 섹션을 확인하십시오.