Фрагменты ретрансляции с экспериментальным React: свойство $ fragmentRefs отсутствует

Подробности

Я пытаюсь отреагировать экспериментально с одновременным режимом и реле. Я никогда раньше не использовал реле, и мне немного сложно заставить все работать, но я почти готов. При использовании хука response-relay useLazyLoadQuery без каких-либо фрагментов все работает нормально, и я получаю желаемые результаты. Но при добавлении фрагментов возникают проблемы.

Проблема

Когда я настраиваю перехватчик response-relay useLazyLoadQuery в родительском компоненте и включаю фрагменты дочерних компонентов, я получаю следующую ошибку

Свойство '"$ fragmentRefs"' отсутствует в типе 'readonly {readonly "$ fragmentRefs": FragmentRefs ‹" HomeView_getAllUsers ">; } [] ', но требуется в типе' 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">;
};

reactjs typescript graphql relay
person Rajohan    schedule 27.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я понял. Запрос GraphQL возвращает массив со всеми пользователями, в то время как я прошу одного пользователя в дочернем компоненте, поэтому мне просто нужно было сопоставить результат и передать его дочернему компоненту

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

return <div>{renderUsers()}</div>;
person Rajohan    schedule 27.04.2020