[api-codegen-preset] Types for anonymous operations are not generated / anonymous operations are ignored

[jakubnoga]

Overview/summary

In retrospective this seems like a reasonable behavior, but might be overlooked by other people as well and cost them some time and nerves. I think it's at least worth mentioning in the docs that anonymous operations are counted as documents but omitted / ignored in generation phase.
Having only anonymous queries in the project will not trigger any errors but will result in empty output *.generated.d.ts

Consider such an example straight from Shopify docs (https://shopify.dev/docs/api/admin-graphql/2024-10/queries/customers?language=Node.js):

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: `query {
    customers(first: 5, query: "country:canada") {
      edges {
        node {
          id
        }
      }
    }
  }`,
});

apart from annotating with magic #graphql tag it also needs a name. So to get graphql-codegen going one will have to change above code to something like:

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: `
  #graphql
  query customers {
    customers(first: 5, query: "country:canada") {
      edges {
        node {
          id
        }
      }
    }
  }`,
});

There's literally only a single mention of this fact in the graphql-codegen docs and it's in React / Vue chapter (I only found it because I knew what I was looking for): https://the-guild.dev/graphql/codegen/docs/guides/react-vue#writing-graphql-queries

Respective "Vanilla TypeScript" chapter does not contain such a warning.

[lizkenyon]

Hi there 👋

Thanks for the feedback. I believe the best place for us to update the docs is probably here.

If you have any other suggestions, that would have helped you discover them faster please let me know.

[jakubnoga]

Hi 👋

this also looks like a good place to me, this is where I learned about the graphql-codegen and it will be a nice addition to otherwise complete tutorial.