relay GraphQL 初探

鲁丰
2023-12-01

基于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,否则也会报错。

 类似资料: