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

Question

Details

I am trying out react experimental with concurrent mode and relay. I have never used relay before and are having a bit of a hard time getting everything working but, I am almost there. When using the react-relay hook useLazyLoadQuery without any fragments everything is working fine and I get the results I want. But, when adding in fragments I get into some problems.

Problem

When I set up the react-relay hook useLazyLoadQuery in a parent component and include the child components fragments I get the following error

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

As far as I can see I have done everything according to the relay docs and are kind of stuck on why I get this error.

Question

Why can it not find the $fragmentRefs property according to the relay generated type its there. Does anyone have a solution for this?

Code

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;
    }

Relay generated type

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

Rajohan Rajohan · Accepted Answer · 2020-04-27T22:34:30

I figured it out. The GraphQL query returns an array with all the users while I ask for one user in the child component so I just had to map over the result and pass it to the child component

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

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

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

1 Answers