relay GraphQL 初探

基于react relay graphQL的demo笔记

笔记代码详见GitHub

demo介绍

demo使用React Relay GraphQL 基于GitHub GraphQL API v4实现了一个简单的topic列表查询功能，并用到了React UI组件库 Ant Design美化界面。

知识点

1. 定义一个query，并引入片段和变量

   ⚠️：用到分页功能的hook时记得引入count和cursor两个变量

   查询query使用的Hook是useQueryLoader，查询要在input框输入查询内容后点击提交时调用，记得在useQueryLoader获取数据的方法（ loadRepositoryNameQuery() ）中定义好变量值

// App.js
// useQueryLoader Hook
  const [repositoryNameQueryRef, loadRepositoryNameQuery] = useQueryLoader(
    RepositoryNameQuery
  )

  function changeValue (formValues) {
    loadRepositoryNameQuery({ name: formValues, count: 2 })
  }

​

// InputForm.js
handleSubmit(event) {
      event.preventDefault();
      const data = this.state.value
      // 调用loadRepositoryNameQuery()
      this.props.onChange(data);
    }

⚠️：因为用到了usePaginationFragment Hook所以记得定义count变量（这一步官方文档中没有写到所以记得自己加）

​ return里先要渲染InputForm组件，然后在中渲染获取到的数据（获取到的数据又封装了一个组件用来得到片段查询的数据，详见下文引入片段说明）

// App.js
<Suspense fallback={'Loading...'}>
    <section className='App-section'>
      {repositoryNameQueryRef === null ? (
        <p>请输入查询内容</p>
      ) : (
        <Display queryref={repositoryNameQueryRef}></Display>
      )}
    </section>
</Suspense>

2. 引入的片段使用分页查询

​ 使用usePaginationFragment Hook，return里加入了一个button按钮使用 loadNext(想要获取数据的条数) 用来获取列表中的更多数据，还可以使用hasNext来判断是否存在下一条数据等等（关于usePaginationFragment的更多用法可以参照relay官方文档）。

​ 因为获取到的是数组，想要实现分页渲染，要使用map()方法把每次获取到的数据添加到数组里，在渲染列表时使用到了React的UI组件库Ant Design Responsive grid。

// RepositoryInfo.js
<Suspense fallback={'Loading...'}>
    <div>
      {(data?.stargazers?.edges ?? []).map(({ node }) => {
          return (
            <div key={node?.id}>
              {/* <UserInfo user={node} />
                  <span>{node?.createdAt}</span> */}
              <Container fluid>
                <Row debug style={{ width: '700px' }} justify="center">
                  <Col debug>
                    <UserInfo user={node} />
                  </Col>
                  <Col debug>{node?.createdAt}</Col>
                </Row>
              </Container>
            </div>
          )
       })}
    </div>
</Suspense>

⚠️：为了代码的可读性，把不同的fragment封装成了不同的组件并写到了自己的js文件里，这里要注意fragment名称与各自的文件名一致否则会报错。

3. RelayEnvironment

1. 可以使用useRelayEnvironment Hook，具体用法请参照relay官网；

2. 也可以自己写一个组件：

   1. 配置GitHub API token

      创建个人访问令牌 GitHub 官网有详细具体教程，根据官网教程申请token之后请务必保存，因为之后页面不再会显示token。

      ⚠️：token不能直接写到请求头里，要配置在文件.env.local中

   2. 封装fetchGraphQL方法（fetchGraphQL.js）

   3. RelayEnvironment.js 配置存储数据以及获取缓存数据

⚠️：在每次更新fragment时，必须执行命令yarn relay-compiler --schema schema.graphql --src ./src/ --watchman false $@来更新schema，否则也会报错。