Create React App 添加 Relay

在 React 应用程序中使用 Relay 是一种很好的方式来管理数据和状态。Relay 是一个强大的 GraphQL 客户端，它可以帮助你在 React 组件中查询和更新数据。

步骤

1. 首先，确保你的项目已经安装了 Relay 相关的依赖。你可以使用 npm 或者 yarn 来安装 Relay：

npm install react-relay relay-runtime

或者

yarn add react-relay relay-runtime

1. 创建一个 Relay 环境对象。在你的项目中创建一个名为 relay-environment.js 的文件，并添加以下内容：

// www.javascriptcn.com code example
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;

1. 在你的根组件中使用 RelayEnvironmentProvider 提供 Relay 环境。修改 index.js 文件如下：

// www.javascriptcn.com code example
import React from 'react';
import ReactDOM from 'react-dom';
import { RelayEnvironmentProvider } from 'react-relay';
import environment from './relay-environment';
import App from './App';

ReactDOM.render(
  <RelayEnvironmentProvider environment={environment}>
    <App />
  </RelayEnvironmentProvider>,
  document.getElementById('root')
);

1. 创建一个 GraphQL 查询。在你的项目中创建一个名为 UserQuery.graphql 的文件，并添加以下内容：

query UserQuery {
  user(id: "1") {
    id
    name
    email
  }
}

1. 在你的组件中使用 useLazyLoadQuery 钩子来查询数据。修改你的组件如下：

// www.javascriptcn.com code example
import React from 'react';
import { useLazyLoadQuery, graphql } from 'react-relay';

const UserComponent = () => {
  const data = useLazyLoadQuery(
    graphql`
      query UserComponentQuery {
        user(id: "1") {
          id
          name
          email
        }
      }
    `
  );

  return (
    <div>
      <h1>{data.user.name}</h1>
      <p>{data.user.email}</p>
    </div>
  );
};

export default UserComponent;

现在你已经成功地添加了 Relay 到你的 Create React App 项目中。通过这种方式，你可以更加方便地管理你的数据和状态。