GraphQLSP icon indicating copy to clipboard operation
GraphQLSP copied to clipboard

Astro support

Open alexanderalmstrom opened this issue 1 year ago • 2 comments

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>

alexanderalmstrom avatar Feb 25 '24 15:02 alexanderalmstrom