unknown fragments

[LarsEjaas]

Hi everybody

I am new to GraphQL Code Generator. I am working on a next project querying WordPress data from a GraphQL endpoint.

I have a folder structure with various queries and fragments placed in *.ts files in subfolders inside a "data" folder in my project. The queries are working and I get the data. However, codegen will fail after Loading GraphQL schemas and -documents during generation. I get this error:

 Found 1 error

  ✖ ./src/data/generated/graphql.tsx
  AggregateError: 
        GraphQLDocumentError: Unknown fragment "ImageFragment".
        ....

and then a long list of my failing fragments.

How do I import fragments correctly?

Here is an example on how I do things today:

//image-fragment/index.ts
const ImageFragment = `
fragment ImageFragment on MediaItem {
	sourceUrl
	altText
}
`;

export default ImageFragment;

//use in file get-news.ts

import { gql } from "@apollo/client";
import MenuFragment from "../fragments/menus/menus";
import { HeaderFooter } from "../menus/get-menus";
import SeoFragment from "../fragments/seo";
import ImageFragment from "../fragments/image";

export const GET_POST = gql`
	query GET_POST($uri: String) {
      ${HeaderFooter}
	  post: postBy(uri: $uri) {
	    id
	    title
	    content
	    slug
	    uri
	    seo {
          ...SeoFragment
      }
      featuredImage {
        node {
        ...ImageFragment
        }
		  }
	  }
	}
	${MenuFragment}
	${SeoFragment}
	${ImageFragment}
`;

So far I have only tried with a basic codegen.yml file (schema is a live endpoint - but works fine):

overwrite: true
schema: THIS IS THE CORRECT SCHEMA
documents: "src/data/**/*.ts"
generates:
  ./src/data/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"

[LarsEjaas]

Alright, sat down and really took a deep dive into the graphql-code-generator documentation and now finally got the typedDocumentNode up and running. I somehow missed some important steps like placing the actual queries inside *.graphql files.

But have to admit this is really awesome!

[dotansimha]

Hi @LarsEjaas ! Sorry for the late reply. Happy to hear that you managed to fix that issue.

[LarsEjaas]

hi @dotansimha
Better late than never 😉
I still really struggle! I am working in next.js and really have a hard time understanding how things I should set up graphQL-code-generator to work with next.js.

I have looked a lot on this repository: https://github.com/correttojs/graphql-codegen-apollo-next-ssr

The setup I got up and running with typedDocumentNode will give me full type annotation for all queries, but as soon as I start using GetStaticProps and next.js "InferGetStaticPropsType" type annotation all data is just back to "any" - completely defeating the purpose of types!

My setup is that I query the data I need from my headless CMS for a page component with Apollo.

Get_PageDocument is imported as a typedDocumentNode generated by graphQL-code-generator

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const { data, errors } = await apolloClient.query({
    query: Get_PageDocument,
    ...

But when I then try to pass the data (inside the getStaticProps function data is fully annotated) to a page component as a prop data is just annotated as 'any' because I am using the "GetStaticProps"-type that next.js provides.

Is it correctly understood that instead of passing data to a page component like this:

const Page = ({ data }: InferGetStaticPropsType<typeof getStaticProps>) => {

I should pull the data from a hook generated by graphQL-code-generator inside the page component?

Like the example provided here:
https://github.com/correttojs/graphql-codegen-apollo-next-ssr/blob/main/example/src/pages/continents.tsx

I have looked at documentation here:
https://www.graphql-code-generator.com/docs/plugins/typescript-apollo-next
But I think I was getting a bit sidetracked by typedDocumentNode - is it correctly understood that this will not work with next.js?

For reference, I am using Apollo-client 3.3.20 and Next 11.0

[dotansimha]

I think this might be related to Apollo-Client, but really not sure.
The TypedDocumentNode is just TS types, and the actual type-check happens only if Apollo implements and allows TypedDocuemntNode. Seems like it does (see https://github.com/apollographql/apollo-client/blob/main/src/core/ApolloClient.ts#L321-L325 and the definition of QueryOptions).

I'm not sure why it falls back to any in this case, might be a typings issue/missmatch.

I don't think it's related to NextJS, Codegen just generates types and some objects, without any specific code to an environment, so NextJS environment should effect anything here.

Any chance you can share a reproduction in a codesandbox / repo?

[LarsEjaas]

Hi @dotansimha
I think I have to do some experimenting with this.
Next.js IS a bit special in the way it handles, data-fetching.
You would normally fetch all data in one component in using their "getStaticProps" using Apollo Client and the data is then passed to the page component as a prop. Next offers a type-annotation called "GetStaticProps" (watch the capital "G" here) and they use context to pass the data it seems. However, this "GetStaticProp" is very basic and just pass the data with an "any" type - so I actually do think this is next.js lacking here!

I will get back to you when/if I need more help. Found a few other repositories on Github to give me an idea of how things could be done. Ýour documentation is fine, but I need to dig through some examples of how things are implemented in real projects to understand this! Looks like other developers use "Typescript Apollo Nextjs" and fetch data inside the page component using a hook instead of using a prop.
The main issue is that I got some functions running to determine if pages are already SSR or should be rendered on the fly and revalidation if pages should be regenerated due to changes, so this IS a bit more complicated - but I am learning ☺️

Thanks for taking the time to respond - this is greatly appreciated!

[dotansimha]

I see what you mean, so you get typed result from the apollo-client, but then it doesn't keep it typed when you use it with next, right?
I'm not sure how this could be solved, probably missing some type-inference in NextJS?

[LarsEjaas]

@dotansimha and anyone else trying to get fully typed datasets in next.js

I finally found a way to do this in Next. I used quite a bit of time on the "Typescript Apollo Nextjs" plugin, and although it offers a lot of extra ways to set up the file(s) it also offers A LOT of extra complexity.

Most developers will probably be better of just using TypedDocumentNode in most simple cases.

Here is HOW I got it working:

//codegen.yml

overwrite: true 
schema: "https://headless.traderrookie.com/graphql/"
documents: "./src/data/**/*.graphql"
generates:
  ./src/graphql-operations.ts:
    plugins:
      - typescript
      - typescript-operations
      - typed-document-node

Here is an example page component:

//[...slug].tsx

import { ParsedUrlQuery } from "querystring";
import {
  Get_PageDocument,
  Get_PageQuery,
  Get_Pages_UriDocument,
} from "graphql-operations";

const Page = ({ data }: { data: Get_PageQuery }) => {
...

  return (
    <Layout>
      <div
        dangerouslySetInnerHTML={{
          __html: sanitize(data?.page?.content ?? ""),
        }}
      />
    </Layout>
  );
};

export default Page;


export const getStaticProps = async ({params}: {params: ParsedUrlQuery | undefined}) => {
  const { data, errors } = await apolloClient.query({
    query: Get_PageDocument,
    variables: {
      uri:
        typeof params?.slug === "string"
          ? params?.slug
          : params?.slug?.join("/"),
    },
  });

"Get_PageDocument" is provided by TypedDocumentNode. If you hover "data" in the getStaticProps component you will get the name of the type you need to import for "data" in the main Page Component (in this example "Get_PageQuery").

This would probably be helpful for others working with next.js and trying to get fully typed datasets ☺️