preview link

Author: Ankcorn

src/components/GraphiQLClient.tsx

@@ -1,37 +1,48 @@
 import { createGraphiQLFetcher } from "@graphiql/toolkit";
 import GraphiQL from "graphiql";
 import "graphiql/graphiql.css";
-import { useState } from "react";
+import "~/tailwind.css";
+import { useEffect, useState } from "react";
+import { use } from "marked";
 
 const fetcher = createGraphiQLFetcher({
 	url: "https://api.cloudflare.com/client/v4/graphql",
 });
 
 export function GraphiQLClient({ schema }: { schema: any }) {
+	const [query, setQuery] = useState("");
+	useEffect(() => {
+		const search = window.location.search;
+		const params = new URLSearchParams(search);
+
+		setQuery(atob(params.get("query") || ""));
+	}, []);
+
 	const [authToken, setAuthToken] = useState("");
 	return (
 		<div className="flex h-screen flex-col">
-			<div className="flex items-center gap-4 bg-gray-100 p-4">
+			<div className="flex items-center">
 				<label
 					htmlFor="password"
 					className="text-sm/6 font-medium text-gray-900"
 				>
 					Auth Token:
 				</label>
-				<div className="mt-2">
+				<div>
 					<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"
+						className="w-full rounded-md border-2 border-gray-200 bg-white px-2 py-2 dark:border-gray-700 dark:bg-gray-800"
 					/>
 				</div>
 			</div>
 			<div className="flex-1">
 				<GraphiQL
 					fetcher={fetcher}
 					schema={schema}
+					query={query}
 					headers={JSON.stringify({
 						authorization: `Bearer ${authToken}`,
 					})}

src/pages/analytics/graphql-api/api/[name].astro

@@ -4,6 +4,7 @@ import { compile, type JSONSchema } from "json-schema-to-typescript";
 import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
 import SchemaViewer from "~/components/models/SchemaViewer.astro";
 import { Code } from "~/components";
+import { LinkButton } from "~/components";
 import {
 	GraphQLToJSONSchemaBuilder,
 	type Field,
@@ -74,6 +75,9 @@ const gqlQuery = graphQLJSONSchemaToExample(
 	<h2>{name.split(".").join(" ")}</h2>
 	<p>{query.description}</p>
 	<h3>Example</h3>
+	<LinkButton href={`/analytics/graphql-api/graphiql?query=${btoa(gqlQuery)}`}
+		>Open in GraphiQL</LinkButton
+	>
 	<Code code={gqlQuery} lang="graphql" />
 	<h3 id="Parameters">Parameters</h3>
 	<SchemaViewer schema={completeInputType} />

src/pages/analytics/graphql-api/graphiql.astro

@@ -1,20 +1,7 @@
 ---
 import { getCollection } from "astro:content";
 import { GraphiQLClient } from "~/components/GraphiQLClient";
-import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
-import type { StarlightPageProps } from "@astrojs/starlight/components/StarlightPage.astro";
-import Header from "~/components/changelog-next/Header.astro";
 const [schema] = await getCollection("graphql-api");
-
-const props = {
-	frontmatter: {
-		title: "GraphiQL",
-		tableOfContents: false,
-		template: "splash",
-	},
-	hideTitle: true,
-	hideBreadcrumbs: true,
-} as StarlightPageProps;
 ---
 
 <GraphiQLClient

src/util/graphQLJSONSchemaToExample.ts

@@ -4,7 +4,7 @@ function pick3(arr: unknown[]) {
 	return arr.slice(0, 3);
 }
 export function graphQLJSONSchemaToExample(
-	group: string,
+	group: "organizations" | "zones" | "accounts",
 	name: string,
 	description: string,
 	input: JSONSchema,
@@ -14,7 +14,14 @@ export function graphQLJSONSchemaToExample(
 		.split(" ")
 		.map((n: string) => n.charAt(0).toUpperCase() + String(n).slice(1))
 		.join("")
-		.replaceAll(".", "");
+		.replaceAll(".", "")
+		.replaceAll("-", "");
+
+	const groupMapping = {
+		accounts: "account",
+		zones: "zone",
+		organizations: "organization",
+	};
 
 	const outputSections = Object.keys(output.properties || {}).reduce(
 		(outputQuery, key) => {
@@ -54,9 +61,9 @@ export function graphQLJSONSchemaToExample(
 	);
 
 	const gqlQuery = `
-		query Get${queryName}($${group}Tag: string, $datetimeStart: string, $datetimeEnd: string) {
+		query Get${queryName}($${group}Tag: string!, $datetimeStart: Time, $datetimeEnd: Time) {
 				viewer {
-					${group}(filter: {${group}Tag: $${group}Tag}) {
+					${group}(filter: {${groupMapping[group]}Tag: $${group}Tag}) {
 						${name}(
 							limit: 100,
 							filter: {