React 实验性中继片段：属性缺少“$fragmentRefs”

Question

详情

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

问题

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

Property '" $fragmentRefs"' is missing in type 'readonly { readonly " $fragmentRefs": FragmentRefs<"HomeView_getAllUsers">; }[]' but required in type 'HomeView_getAllUsers$key'.

据我所知，我已经根据中继文档完成了所有操作，但有点不明白为什么会出现此错误。

问题

为什么它找不到$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">;
};

Answer 1

我明白了。 GraphQL 查询 returns 一个包含所有用户的数组，而我在子组件中请求一个用户，所以我只需要映射结果并将其传递给子组件

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

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

React 实验性中继片段：属性缺少“$fragmentRefs”

Relay fragments with React experimental: Property '" $fragmentRefs"' is missing

relay

typescript

reactjs

graphql

React 实验性中继片段：属性 缺少“$fragmentRefs”

Relay fragments with React experimental: Property '" $fragmentRefs"' is missing

relay

typescript

reactjs

graphql

React 实验性中继片段：属性缺少“$fragmentRefs”