用React实验中继片段。属性'" $fragmentRefs"'丢失。

Question

详细内容

我正在尝试用并发模式和继电器进行反应实验。我从来没有使用过中继，并且有一个有点困难的时间让一切工作，但是，我几乎没有。当使用react-relay钩子 useLazyLoadQuery 在没有任何碎片的情况下，一切都很好，我得到了我想要的结果。但是，当添加碎片时，我遇到了一些问题。

问题

当我设置了react-relay钩子的时候 useLazyLoadQuery 在父组件中包含子组件的片段，我得到以下错误信息。

属性'" $fragmentRefs"' 在类型'readonly { readonly " $fragmentRefs": FragmentRefs< "HomeView_getAllUsers">; }[]"，但在 "HomeView_getAllUsers$key "类型中需要。

据我所知，我已经按照中继文档做了所有的事情，但有点卡在了为什么会出现这个错误。

疑问

为什么它找不到 $fragmentRefs 根据继电器生成的类型其有的属性。谁有办法解决这个问题？

编码

主页.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;

主页查看.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;

图形QL

@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查询返回一个包含所有用户的数组，而我在子组件中要求一个用户，所以我只需要将结果映射过来，并将其传递给子组件。

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

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