Fragment masking with GraphQL code-gen does not work.
Hey,
i try to set up graphql-code gen and want to use fragment-masking. Here's an example:
import { apiClient } from "@/features/query/apiClient";
import { queryOptions } from "@tanstack/react-query";
import { graphql } from "@/gql";
import type { DocumentPageQuery } from "@/gql/graphql";
const DocumentPageDocument = graphql(`
query DocumentPage($id: ID!) {
document(id: $id) {
id
name
creator {
...DocumentCreator
}
}
}
`);
export const documentQueryOptions = (id: string) => {
return queryOptions<DocumentPageQuery["document"]>({
queryKey: ["documents", "detail", id],
queryFn: () =>
apiClient
.rq(DocumentPageDocument, { id })
.then(({ document }: DocumentPageQuery) => document),
});
};
import { apiClient } from "@/features/query/apiClient";
import { queryOptions } from "@tanstack/react-query";
import { graphql } from "@/gql";
import type { DocumentPageQuery } from "@/gql/graphql";
const DocumentPageDocument = graphql(`
query DocumentPage($id: ID!) {
document(id: $id) {
id
name
creator {
...DocumentCreator
}
}
}
`);
export const documentQueryOptions = (id: string) => {
return queryOptions<DocumentPageQuery["document"]>({
queryKey: ["documents", "detail", id],
queryFn: () =>
apiClient
.rq(DocumentPageDocument, { id })
.then(({ document }: DocumentPageQuery) => document),
});
};
import React from "react";
import { useSuspenseQuery } from "@tanstack/react-query";
import { documentQueryOptions } from "./documentQueryOptions";
import { getFragmentData } from "@/gql/fragment-masking";
import { graphql } from "@/gql";
import type { FragmentType } from "@/gql/fragment-masking";
type DocumentPageProps = {
documentId: string;
};
export const DocumentCreatorFragment = graphql(`
fragment DocumentCreator on User {
id
name
}
`);
export const DocumentPage: React.FC<DocumentPageProps> = ({ documentId }) => {
const { data } = useSuspenseQuery(documentQueryOptions(documentId));
return <Page creator={data.creator} />;
};
const Page = (props: {
creator: FragmentType<typeof DocumentCreatorFragment>;
}) => {
const creator = getFragmentData(DocumentCreatorFragment, props.creator);
return <div>{creator.name}</div>;
};
import React from "react";
import { useSuspenseQuery } from "@tanstack/react-query";
import { documentQueryOptions } from "./documentQueryOptions";
import { getFragmentData } from "@/gql/fragment-masking";
import { graphql } from "@/gql";
import type { FragmentType } from "@/gql/fragment-masking";
type DocumentPageProps = {
documentId: string;
};
export const DocumentCreatorFragment = graphql(`
fragment DocumentCreator on User {
id
name
}
`);
export const DocumentPage: React.FC<DocumentPageProps> = ({ documentId }) => {
const { data } = useSuspenseQuery(documentQueryOptions(documentId));
return <Page creator={data.creator} />;
};
const Page = (props: {
creator: FragmentType<typeof DocumentCreatorFragment>;
}) => {
const creator = getFragmentData(DocumentCreatorFragment, props.creator);
return <div>{creator.name}</div>;
};
1 Reply
like-goldOP•3w ago
The code works, but I TypeScript complains at the line
Can somebody help here?
return <Page creator={data.creator} />;
return <Page creator={data.creator} />;
Type '{ __typename?: "User" | undefined; } & { ' $fragmentRefs'?: { DocumentCreatorFragment: DocumentCreatorFragment; } | undefined; }' is not assignable to type 'never'.ts(2322)
DocumentPage.tsx(26, 3): The expected type comes from property 'creator' which is declared here on type 'IntrinsicAttributes & { creator: never; }'
(property) creator: never
Type '{ __typename?: "User" | undefined; } & { ' $fragmentRefs'?: { DocumentCreatorFragment: DocumentCreatorFragment; } | undefined; }' is not assignable to type 'never'.ts(2322)
DocumentPage.tsx(26, 3): The expected type comes from property 'creator' which is declared here on type 'IntrinsicAttributes & { creator: never; }'
(property) creator: never