使用 React 实验性中继片段：缺少属性 '"$fragmentRefs"'

Posted 2023-03-08

【中文标题】使用 React 实验性中继片段：缺少属性 \'"$fragmentRefs"\'

【英文标题】：Relay fragments with React experimental: Property '" $fragmentRefs"' is missing使用 React 实验性中继片段：缺少属性 '"$fragmentRefs"'

【发布时间】：2020-08-11 15:01:12

【问题描述】：

详情

我正在尝试使用并发模式和中继进行反应实验。我以前从未使用过继电器，并且很难让一切正常工作，但是我快到了。当使用没有任何片段的 react-relay 钩子 useLazyLoadQuery 时，一切正常，我得到了我想要的结果。但是，在添加片段时，我遇到了一些问题。

问题

当我在父组件中设置 react-relay 钩子 useLazyLoadQuery 并包含子组件片段时，我收到以下错误

“readonly readonly”类型中缺少属性“$fragmentRefs” $fragmentRefs": FragmentRefs; []' 但是 在“HomeView_getAllUsers$key”类型中是必需的。

据我所知，我已根据中继文档完成了所有操作，但对于为什么会出现此错误感到有些困惑。

问题

为什么根据relay生成的类型找不到$fragmentRefs属性。有人对此有解决方案吗？

代码

Home.tsx

import React from "react";
import  useLazyLoadQuery  from "react-relay/hooks";
import graphql from "babel-plugin-relay/macro";

import  HomeGetAllUsersQuery  from "./__generated__/HomeGetAllUsersQuery.graphql";
import HomeView from "./HomeView";

const Home: React.FC = (): React.ReactElement => 
    const data = useLazyLoadQuery<HomeGetAllUsersQuery>(
        graphql`
            query HomeGetAllUsersQuery 
                getAllUsers 
                    ...HomeView_getAllUsers
                
            
        `,
        ,
         fetchPolicy: "store-or-network" 
    );

    return <HomeView getAllUsers=data.getAllUsers />;
;

export default Home;

HomeView.tsx

import React from "react";
import graphql from "babel-plugin-relay/macro";
import  useFragment  from "react-relay/hooks";

import  HomeView_getAllUsers$key  from "./__generated__/HomeView_getAllUsers.graphql";

type Props = 
    getAllUsers: HomeView_getAllUsers$key;
;

const HomeView: React.FC<Props> = (props: React.PropsWithChildren<Props>): React.ReactElement => 
    const data = useFragment<HomeView_getAllUsers$key>(
        graphql`
            fragment HomeView_getAllUsers on UserType 
                username
            
        `,
        props.getAllUsers
    );

    return <div>data.username</div>;
;

export default HomeView;

GraphQL

@ObjectType( description: "Object representing a user" )
class UserType 
    @Field(() => ID)
    id!: number;

    @Field()
    username!: string;


@Query(() => [UserType],  description: "Returns all users" )
    async getAllUsers(): Promise<User[]> 
        const users = await User.findAll();

        if (!users) 
            throw new Error("No users could be found");
        

        return users;
    

中继生成类型

export type HomeView_getAllUsers$key = 
    readonly " $data"?: HomeView_getAllUsers$data;
    readonly " $fragmentRefs": FragmentRefs<"HomeView_getAllUsers">;
;

【参考方案1】：

我想通了。当我在子组件中请求一个用户时，GraphQL 查询返回一个包含所有用户的数组，因此我只需映射结果并将其传递给子组件

const renderUsers = (): React.ReactNode => 
    return data.getAllUsers.map((user, index) => (
        <HomeView key=data.getAllUsers[index].id getAllUsers=user />)
    );


return <div>renderUsers()</div>;