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

使用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

广告
将在 10 秒后关闭
bannerAds