Фрагменты ретрансляции с помощью React эксперимента: отсутствует свойство '"fraggmentRefs" - PullRequest
Новая
       77

Фрагменты ретрансляции с помощью React эксперимента: отсутствует свойство '"fraggmentRefs"

1 голос
/ 28 апреля 2020

Подробности

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

Проблема

Когда я устанавливаю ловушку реагирующего реле useLazyLoadQuery в родительском компоненте и включаю Фрагменты дочерних компонентов Я получаю следующую ошибку

Отсутствует свойство "$ fragRefs" в типе "readonly {readonly" $ fragRefs ": 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">;
};

1 Ответ

0 голосов
/ 28 апреля 2020

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

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

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