Problems getting fragment masking to work

[wuarmin]

Hey 👋 ,

I've been trying to get fragment masking to work for hours, but so far without success. I would really appreciate some help.
Here's my current setup:

// src/components/documentQueryOptions.ts
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(/* GraphQL */ `
  query DocumentPage($id: ID!) {
    document(id: $id) {
      id
      name
      creator {
        ...DocumentCreator
      }
    }
  }
`);

export const documentQueryOptions = (id: string) => {
  return queryOptions<DocumentPageQuery>({
    queryKey: ["documents", "detail", id],
    queryFn: () => apiClient.rq(DocumentPageDocument, { id }),
  });
};

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

const DocumentCreatorFragment = graphql(/* GraphQL */ `
  fragment DocumentCreator on User {
    name
  }
`);

export const DocumentPage: React.FC<DocumentPageProps> = ({ documentId }) => {
  const { data } = useSuspenseQuery(documentQueryOptions(documentId));

  return <Page creator={data.document.creator} />;
};

const Page = (props: {
  creator: FragmentType<typeof DocumentCreatorFragment>;
}) => {
  const creator = getFragmentData(DocumentCreatorFragment, props.creator);

  return <div>{creator.name}</div>;
};

The code works, but TypeScript complains at this line:

  return <Page creator={data.document.creator} />;

Type '{ __typename?: "User" | undefined; } & { ' $fragmentRefs'?: { DocumentCreatorFragment: DocumentCreatorFragment; } | undefined; }' is not assignable to type 'never'.ts(2322)
DocumentPage.tsx(25, 3): The expected type comes from property 'creator' which is declared here on type 'IntrinsicAttributes & { creator: never; }'
(property) creator: never

data.document.creator is of type

(property) creator: {
    __typename?: "User";
} & {
    ' $fragmentRefs'?: {
        "DocumentCreatorFragment": DocumentCreatorFragment;
    };
}

Here's my codegen.ts

import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  overwrite: true,
  schema: "http://172.17.0.1:2300/graphql-api/handle",
  documents: ["src/**/*.{ts,tsx}", "!src/gql/**/*"],
  generates: {
    "src/gql/": {
      // config: { useTypeImports: true },
      preset: "client",
      presetConfig: {
        fragmentMasking: { unmaskFunctionName: "getFragmentData" },
      },
      config: {
        useTypeImports: true,
      },
      plugins: [],
    },
  },
};

export default config;

[wuarmin]

Hey 👋 ,
it just had something to do with missing types from @graphql-typed-document-node/core.
After adding it explicitly via ...
pnpm -F my-app add -D @graphql-typed-document-node/core (I am in a pnpm monorepo)
pnpm add -D @graphql-typed-document-node/core (if you aren't in a monorepo)

fragment-masking works great. A new milestone 👍

I believe that the issue with @graphql-typed-document-node/core is confusing some users who are trying to get fragment masking to work.

#8859