Astro support

[alexanderalmstrom]

Is there a way to enable typed queries in .astro files, just like in .ts and .tsx?

I've got a page route /posts/[...slug].astro with a custom graphql client using introspection to a remote graphql endpoint but the query does not seem to be recognized like in .ts files.

---
import { graphql } from "@/graphql";
import { client } from "@/lib/client";

const { slug } = Astro.params;

const PostsQuery = graphql(`
  query PostsQuery($slug: String!) {
    PostItems(by_slugs: $slug) {
      items {
        id
        name
      }
    }
  }
`);

const { data, error } = await client.query(PostsQuery, {
  slug: "posts/" + slug,
});

if (error) {
  return Astro.redirect("/500");
}

const post = data.PostItems.items[0];

if (!post) {
  return Astro.redirect("/404");
}
---

<article>
  <h1>{post.name}</h1>
</article>

[kitten]

I think this basically comes down more to how the Astro language server integrates with TypeScript and/or whether they have a TS plugin that works around the different file formats.

For example, as far as I know Vue has basically implemented this, although we haven't explicitly tested against their implementation yet.

It shiuld works for Vue because of how "Volar" is implemented: https://volarjs.dev/ And the page also says that Volar is used by Astro.

So, while we haven't tested this, this isn't really something we can influence or implement. The main thing to keep in mind is whether you're using Astro's language server based on Volar afaik

[JoviDeCroock]

Related to https://github.com/0no-co/GraphQLSP/issues/168

[thegatesdev]

I created an issue on the Astro bugtracker with a reproducible example: https://github.com/withastro/language-tools/issues/991