Missing properties in autocompletion

[belafonte]

Hey there,

Iam currently running into issues with autocompletion.

my codegen config is like so:

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

const config: CodegenConfig = {
  schema: "....",
  documents: ["./shared/graphql/queries.ts"],
  ignoreNoDocuments: true, // for better experience with the watcher
  generates: {
    "./shared/graphql/__generated__/": {
      preset: "client",
    },
  },
};
export default config;

and i have the following query:

export const GET_INDEX_QUERY = graphql(`
  query GetIndex {
    entries(slug: "Index") {
      id
      slug
      ... on index_index_Entry {
        headerVid {
          id
          filename
          height
          img
          path
        }
      }
    }
  }
`);

But in the auto completion only id and slug are available...

In the genereated code it seams that all types are generated for "entries" and not only the type for the specific query.

Anyone has an idea how to solve this? Or is this a bug?

[belafonte]

For everybody struggling with the same problem, one possible solution is to use type guards and type predicates to narrow down the type:

https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in

maybe that helps somebody

[ghost]

Hi, could you please give the full example of how you extracted the correct type from the generated type?

[belafonte]

You can check for a certain property in the union type which is not shared across all types.
In my example, checking for "headerVid" for instance enables all properties of that union type:

if("headerVid" in entry) {
    do something with the properties
}

[ghost]

I ended up using this:

const WORKSPACES_PAGE_QUERY = gql`
  query WorkspacePage($workspaceId: ID!) {
    workspace: node(id: $workspaceId) {
      ... on Workspace {
        id
        name
      }
    }
  }
  `;

type GetDeepProp<T extends object, Key extends string> = Key extends keyof T 
  ? T[Key]
  : {
   [k in keyof T]: T[k] extends object 
    ? GetDeepProp<T[k], Key>
    : unknown
  }[keyof T]

  const { data } = useSuspenseQuery<WorkspacePageQuery>(WORKSPACES_PAGE_QUERY, { variables: { workspaceId: params.workspaceId } });
  type Workspace = Extract<GetDeepProp<WorkspacePageQuery, 'workspace'>, { __typename?: "Workspace" }>;
  const workspace = data.workspace as Workspace;

[belafonte]

Maybe that works yeah.

But just "pleasing" the TS Compiler might not prevent you from runtime errors and therefore circumvent the nice typings you get from Graphql.

Casting in Typescript can be dangerous imho.

The "in operator" is a runtime check.

[ardatan]

The "in operator" is a runtime check.

But it also works with autocompletion. The best way of checking the type would be;

if (result.__typename === 'MyType') {
  // result is MyType here both in runtime and IDE
}