使用【GraphQL × Relay】通过@inline加载片段

1 年 ago

新, 韵

1 minute

使用inline方式加载Fragment的方法

主要的是通过Relay在Fragment中展开的方法有”useFragment”和”readInData”，通常情况下使用”useFragment”是基本的，但是在使用”useFragment”时无法成功获取数据，因此尝试了使用”readInData”代替，发现它能够成功运行，这是那时的备忘录。
注意：本文中的API使用了Github Graphql API。

import { graphql } from 'react-relay'

export const repositoryQuery = graphql`
  query repositoryQuery {
    repository(owner: "Yosuke23" name: "nextjs_relay_demo") {
      ...repositoryFragment
    },
    user(login: "Yosuke23") {
      ...userFragment
    }
  }
`

如果想要使用readInData而不是useFragment来读取此repositoryFragment的话，。。。


import { graphql } from "relay-runtime";

export const repositoryFragment = graphql`
    fragment repositoryFragment on Repository @inline{
         name
         url
         createdAt
    }
`

在编译器中指定@inline在fragment对象前进行运行。 qì @inline fragment .)

这是读取这个片段的方法。

import {repositoryFragment$key as repositoryFragmentRef} from '../../queries/__generated__/repositoryFragment.graphql';
import { repositoryFragment } from '../../queries/repositoryFragment';
import { useQueryLoader, readInlineData } from 'react-relay'
import type {repositoryQuery as repositoryQueryType} from '../../queries/__generated__/repositoryQuery.graphql';
import {repositoryQuery} from '../../queries/repository';

  const [, loadRepositoryQuery] = useQueryLoader(repositoryQuery, initialRepositoryRef!)
  useEffect
    (() => {
      loadRepositoryQuery({})
    }, [])

首先加载包含repositoryFragment的repositoryQuery，而repositoryFragment不会在加载repositoryQuery时展开，所以可以使用useFragment或者readInlineData（这里选择后者）来展开Fragment对象，使其可以被使用。


  const githubRepositoryData = readInlineData<repositoryFragmentRef>(repositoryFragment, githubDemoContext?.data?.repository ?? null);

repositoryFragmentRef是在repositoryFragment编译时生成的Key类型。
第一个参数通常是repositoryFragment本身的graphql文件，第二个参数是实际设置在该fragment位置的实际数据。
传递给$key类型以适应。
通过这样做，我们可以获取fragment数据。

请参考：https://relay.dev/docs/api-reference/graphql-and-directives/#inline