add graphql client

Author: Ankcorn

package-lock.json

@@ -103,5 +103,10 @@
 	},
 	"volta": {
 		"node": "22.9.0"
+	},
+	"dependencies": {
+		"@graphiql/toolkit": "^0.11.1",
+		"graphiql": "^3.8.3",
+		"json-schema-to-typescript": "^15.0.3"
 	}
 }

package.json

@@ -0,0 +1,42 @@
+import { createGraphiQLFetcher } from "@graphiql/toolkit";
+import GraphiQL from "graphiql";
+import "graphiql/graphiql.css";
+import { useState } from "react";
+
+const fetcher = createGraphiQLFetcher({
+	url: "https://api.cloudflare.com/client/v4/graphql",
+});
+
+export function GraphiQLClient({ schema }: { schema: any }) {
+	const [authToken, setAuthToken] = useState("");
+	return (
+		<div className="flex h-screen flex-col">
+			<div className="flex items-center gap-4 bg-gray-100 p-4">
+				<label
+					htmlFor="password"
+					className="text-sm/6 font-medium text-gray-900"
+				>
+					Auth Token:
+				</label>
+				<div className="mt-2">
+					<input
+						id="password"
+						name="password"
+						type="password"
+						onChange={(e) => setAuthToken(e.target.value)}
+						className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-orange-500 sm:text-sm/6"
+					/>
+				</div>
+			</div>
+			<div className="flex-1">
+				<GraphiQL
+					fetcher={fetcher}
+					schema={schema}
+					headers={JSON.stringify({
+						authorization: `Bearer ${authToken}`,
+					})}
+				/>
+			</div>
+		</div>
+	);
+}

src/components/GraphiQLClient.tsx

@@ -12,7 +12,7 @@ const { node, root } = Astro.props;
 		node.title ? (
 			<span class="mr-2 font-bold">{node.title}</span>
 		) : (
-			<code class="mr-2 !pr-0 font-mono rounded-md bg-gray-100">
+			<code class="mr-2 rounded-md bg-gray-100 !pr-0 font-mono">
 				{node.subpath[node.subpath.length - 1]}
 			</code>
 		)
@@ -46,7 +46,7 @@ const { node, root } = Astro.props;
 
 	{
 		node.children && (
-			<ul class="!list-none m-0 p-0 ml-4">
+			<ul class="m-0 ml-4 !list-none p-0">
 				{node.children.map((node: SchemaNode) => (
 					<Astro.self node={node} />
 				))}

src/components/models/SchemaRow.astro

@@ -13,6 +13,7 @@ import {
 	videosSchema,
 	workersAiSchema,
 	changelogsNextSchema,
+	graphQLSchema,
 } from "~/schemas";
 
 const partialSchema = z.object({
@@ -78,4 +79,8 @@ export const collections = {
 	"changelogs-next": defineCollection({
 		schema: changelogsNextSchema,
 	}),
+	"graphql-api": defineCollection({
+		schema: graphQLSchema,
+		type: "data",
+	}),
 };