preset: client doesn't detect documents in .astro files, but does watch the files properly

[iWildman1]

Which packages are impacted by your issue?

@graphql-codegen/cli, @graphql-codegen/client-preset

Describe the bug

Setting up the codegen to watch documents: ['./**/*.astro'] results in the file getting watched correctly, but it doesn't seem like it's able to determine any GraphQL documents and type them properly.

For example, the following frontmatter of an Astro file will result in postsQuery being typed as undefined, but moving the query into a .ts file will correctly type the query:

---
import Layout from '../layouts/Layout.astro';
import { graphql } from '../../gql';

const postsQuery = graphql(`
  query PostsQuery {
    posts {
      nodes {
        title
        id
        databaseId
      }
    }
  }
`)
---

Changing the file does trigger the codegen to re-run while in watch mode, but the type of the query won't get generated.

Your Example Website or App

Create a new astro app as described below

Steps to Reproduce the Bug or Issue

1. Create a new astro app with npm create astro@latest
2. Create a codegen.ts file in the app root with these settings:

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

const config: CodegenConfig = {
  schema: "https://swapi-graphql.netlify.app/.netlify/functions/index",
  documents: ['./**/*.astro', './**/*.ts'],
  config: {
    dedupeFragments: true,
  },
  generates: {
    './gql/': {
      preset: 'client',
      plugins: [],
      config: {
        dedupeFragments: true,
        enumsAsTypes: true,
        useTypeImports: true,
      },
    },
  },
};

export default config;

3. Run yarn graphql-codegen
4. Create a new query in the src/pages/index.astro file:

---
import Layout from '../layouts/Layout.astro';
import { graphql } from '../../gql';

const allFilmsWithVariablesQueryDocument = graphql(`
  query allFilmsWithVariablesQuery($first: Int!) {
    allFilms(first: $first) {
      edges {
        node {
          ...FilmItem
        }
      }
    }
  }
`)
---

5. Re-run the generator

The allFilmsWithVariablesQueryDocument document will stay typed as unknown.

Expected behavior

As a user, I would expect that the document is detected by the codegen and returns a typed document node. Instead, it stays as unknown.

Screenshots or Videos

No response

Platform

• OS: macOS
• NodeJS: 16.14.2
• graphql version: 16.6.0
• @graphql-codegen/cli version(s): 3.2.2
• "@graphql-codegen/client-preset version(s): 2.1.1

Codegen Config File

No response

Additional context

No response

[knpwrs]

A fix for this would be great. Would a community PR be accepted? Does anyone know how much effort it would be to get it fixed? A naive approach could be to just pull out everything inside --- and --- and treat that as TypeScript.

[ausminternet]

Stumpled upon this problem too... any news?

[sgalcheung]

Doesn't support Astro now?

I also encountering an error:

> graphql-codegen

✔ Parse Configuration
⚠ Generate outputs
  ❯ Generate to ./src/gql/
    ✔ Load GraphQL schemas
    ✖
      Unable to find any GraphQL type definitions for the following pointers:
      - src/**/*.astro
    ◼ Generate

feat: let graphql-tag-pluck load from astro files #5781