2b:null 2c:["$","title",null,{"children":"GraphQL Schema Viewer | brettforbes | Observable"}] 31:T5b7,queryApolloSchema = endpoint => fetch( endpoint, { "headers": { "content-type": "application/json", }, "body": JSON.stringify({ "operationName": "IntrospectionQuery", "variables": {}, // Query taken from https://api.fly.io/graphql and condensed "query": ` query IntrospectionQuery { __schema { queryType { name } mutationType { name } subscriptionType { name } types { ...FullType } directives { name description locations args { ...InputValue } } } } fragment FullType on __Type { kind name description fields(includeDeprecated: true) { name description args { ...InputValue } type { ...TypeRef } isDeprecated deprecationReason } inputFields { ...InputValue } interfaces { ...TypeRef } enumValues(includeDeprecated: true) { name description isDeprecated deprecationReason } possibleTypes { ...TypeRef } } fragment InputValue on __InputValue { name description type { ...TypeRef } defaultValue } fragment TypeRef on __Type { kind, name, ofType { kind, name, ofType { kind, name, ofType { kind, name, ofType { kind, name, ofType { kind, name, ofType { kind, name, ofType { kind, name } } } } } } } } ` }), "method": "POST", }) .then(r => r.json()) .then(d => d.data.__schema)32:Ta42,function renderType(d, {typeIndex, scope, field = null, flags = {}} = {}) { if(!d) { console.warn("Rendering empty type", d); return "???"; } const isCallable = typeIndex.query.has(d.name) || typeIndex.mutation.has(d.name); const fieldKeys = { INPUT_OBJECT: "inputFields", ENUM: "enumValues", OBJECT: "fields", INTERFACE: "fields", callable: "args", }; // The difference between "render*" and "format*": Render does recursive calls, format does not. // Formats: "content", "name: content" const formatField = (field, content) => !field ? content : htl.html`

${field.name}: ${content}`; // Formats: "name", "name!", "[name]", , "[name]!" const formatName = (d, {required, list}) => htl.html`${list ? `[${d.name}]` : d.name}${required ? "!" : ""}`; // Format: "name { value1, value2 }" const formatEnum = (d, flags) => htl.html`${formatName(d, flags)} { ${ d.enumValues.map((d, i) => htl.html.fragment`${i ? ", " : ""}${d.name}`) } }`; const renderKind = (d, field, flags = {}) => { if(!d) return ""; if(d.kind === "SCALAR" ) return formatField(field, formatName(d, flags)); if(d.kind === "ENUM" ) return formatField(field, formatEnum(typeIndex.name.get(d.name), field, flags)); if(d.kind === "NON_NULL") return renderKind(d.ofType, field, {...flags, required: true}); if(d.kind === "LIST" ) return renderKind(d.ofType, field, {...flags, list: true}); return renderType(typeIndex.name.get(d.name), {typeIndex, scope, field, flags}); }; const renderFields = fields => htl.html`

${fields.map(d => renderKind(d.type, d))}`; const type = isCallable ? "callable" : d.kind; const [prefix, suffix] = isCallable ? "()" : type === "ENUM" ? "[]" : "{}"; const body = htl.html`

`; const fields = d[fieldKeys[type]]; const output = htl.html`

${formatField(field, htl.html.fragment`${formatName(d, flags)} ${prefix}`)}

${body}

${suffix}${isCallable ? ":" : ""} ${isCallable ? renderKind(d.type) : ""} `; output.addEventListener("click", () => body.replaceWith(renderFields(fields)), {once: true}); return output; }33:T5ab,typeCss = ({fontSize = "12px"} = {}) => ` :scope { --field-indent: 4ch; --type-indent: 2ch; --inline-type-indent: 2ch } :scope { font: ${fontSize}/1.5 var(--monospace); vertical-align: top; margin-left: var(--type-indent); white-space: nowrap } :scope [title] { cursor: help; text-decoration: underline; text-decoration-style: dotted; } :scope :scope, :scope details, :scope-type-suffix { display: inline-block; vertical-align: top } :scope details > summary { cursor: pointer; width: max-content; list-style-position: outside; } :scope details > summary > * { display: inline-block } :scope details[open] + :scope-type-end { display: block; margin-bottom: 8px } :scope details[open] + :scope-type-end :scope-type-suffix { vertical-align: top } :scope div:not([data-fields-count="0"]) > details:not([open]) > summary:after { content: "…"; } :scope-type-end { display: inline-block } :scope-type-end > :scope-type { padding-left: var(--inline-type-indent); display: inline-block } :scope-fields { padding-left: var(--field-indent) } :scope-field { display: block } :scope-field-label { vertical-align: top; color: var(--syntax-key); } :scope-field-label [title] { cursor: help; text-decoration: underline; text-decoration-style: dotted; } :scope-enum-value { color: var(--syntax-string); } :scope-name[data-kind="SCALAR"] { -color: var(--syntax-atom); } :scope-name[data-kind="OBJECT"], :scope-name[data-kind="INPUT_OBJECT"] { font-weight: bold } `34:[{"id":"1419f53b9b4c61c505f9020b12ae1f71fe9931bab36eccf5f74e5ec660e1290d23b74385da9ddb65418ef497944f05d52e8e9e2a086ea9be84b3b90fa657b678","href":"https://static.observableusercontent.com/files/1419f53b9b4c61c505f9020b12ae1f71fe9931bab36eccf5f74e5ec660e1290d23b74385da9ddb65418ef497944f05d52e8e9e2a086ea9be84b3b90fa657b678","name":"flySchema.json.zip","type":"application/zip","lastModified":1781263710135.616,"size":48970}] 2f:{"id":"6ef3129d123de92d","slug":null,"title":"GraphQL Schema Viewer","thumbnail":"2423d8238e5b4e5b2220f25c52fc3f002228b36cfc700964f4364dc191b5acd9","access_level":"public","create_time":"$D2026-06-12T11:28:30.135Z","update_time":"$D2026-06-12T11:28:30.135Z","view_time":null,"first_public_time":"$D2026-06-12T11:28:30.135Z","has_unpublished_edits":null,"fork":{"id":"4b8a1b950f85a1e9","slug":"graphql-schema","title":"GraphQL Schema Explorer","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f846f459b144e893","login":"brettforbes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/90abd4233f342d3bde898a6f28cf0f1a64652b13845939fedb9e12eda77f7bd0","tier":"starter_2024"},"version":494,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e3ae8b6a8e4f693b","login":"brettforbes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/90abd4233f342d3bde898a6f28cf0f1a64652b13845939fedb9e12eda77f7bd0","tier":null}],"members":[{"type":"individual","id":"e3ae8b6a8e4f693b","login":"brettforbes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/90abd4233f342d3bde898a6f28cf0f1a64652b13845939fedb9e12eda77f7bd0","tier":null,"role":"editor"},{"type":"team","id":"f846f459b144e893","login":"brettforbes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/90abd4233f342d3bde898a6f28cf0f1a64652b13845939fedb9e12eda77f7bd0","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"GraphQL Schema Viewer","cells":[{"id":383,"value":"# GraphQL Schema Viewer\n\nExplore types and relationships in GraphQL API schemas.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"viewof schemaSource = (choices => Inputs.radio(Object.entries((choices)), {\n label: \"API\",\n format: ([, v]) => v.label,\n keyof: ([k]) => k,\n valueof: ([, v]) => v,\n value: choices[params.api ?? \"swapi\"]\n}))({\n ...queryingLoaders,\n ...staticLoaders,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"viewof query = Inputs.text({type: \"search\", placeholder: \"Search all\", value: params.query})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"---\n## Queries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"listFilter(typeIndex, d => d.query.values(), {query, height: null})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"---\n## Mutations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":156,"value":"listFilter(typeIndex, d => d.mutation.values(), {query, height: null})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"---\n## 🚧 All types","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"viewof allTypesFiltered = search(typeIndex.name.values(), {query})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"viewof kind = addCss(\n Inputs.checkbox(Object.keys(typeIndex.kind), {\n value: this?.value ?? Object.keys(typeIndex.kind),\n format: d => {\n const c = allTypesFiltered.filter(t => t.kind === d).length; \n return htl.html`${d} (${c})`;\n },\n label: \"Kind\"\n }),\n `form:scope { max-width: none }`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"{\n const scope = DOM.uid().id;\n const kindSet = new Set(kind);\n const table = Inputs.table(allTypesFiltered.filter(d => kindSet.has(d.kind)), {\n layout: \"auto\",\n columns: [\"kind\", \"name\"],\n rows: Infinity,\n height: 600,\n header: {\n name: \"type\",\n },\n width: {\n kind: 0\n },\n format: {\n name: (d, i, arr) => renderType(arr[i], {typeIndex, scope})\n },\n });\n \n return Object.defineProperty(htl.html`

${table}${addCss(null, typeCss(), {scope})}`, \"value\", {\n get: () => table.value\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"---\n## Graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"graph = {\n const skipKinds = new Set([\"SCALAR\", \"ENUM\"]);\n const sources = new Map();\n \n const unwrap = type => {\n if(type.kind === \"NON_NULL\") return unwrap(type.ofType);\n if(type.kind === \"LIST\") return unwrap(type.ofType);\n return typeIndex.name.get(type.name);\n };\n\n const processFields = (source, fields) => {\n if(!fields?.length) return;\n if(!sources.has(source)) sources.set(source, new Set());\n const children = sources.get(source);\n \n for(const field of fields) {\n //if(!field.type) continue;\n const type = unwrap(field.type);\n if(skipKinds.has(type.kind)) continue;\n children.add(type);\n if(!sources.has(type)) process(type);\n }\n };\n\n const process = type => {\n processFields(type, type.inputFields);\n //processFields(type, type.enumValues);\n processFields(type, type.fields);\n processFields(type, type.args);\n };\n\n for(const type of typeIndex.mutation.values()) process(type);\n\n return sources;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"{\n const links = [...graph].flatMap(([source, targets]) => [...targets].map(target => `${source.name} --> ${target.name}`));\n const svg = await mermaid`---\nconfig:\n---\nflowchart LR\n${links.join(\"\\n \")} \n `;\n svg.setAttribute(\"width\", svg.getAttribute(\"viewBox\").split(\" \")[2] * .75);\n svg.style.cssText += \"display:block;width:auto\";\n \n return htl.html`

${svg}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"mermaid = {\n const {default: m} = await import(\"https://esm.run/mermaid@11.7.0\");\n m.initialize({securityLevel: \"loose\", startOnLoad: false, theme: \"neutral\"});\n return async(...args) => {\n const n = document.createElement(\"div\");\n n.innerHTML = (await m.render(DOM.uid().id, String.raw(...args))).svg;\n return n.removeChild(n.firstChild);\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"typeIndex = createTypeIndex(await schemaSource.callback())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"params = Object.fromEntries(new URL(document.baseURI).searchParams)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"// Schema obtained from JSON exports\nstaticLoaders = ({\n github: {\n label: \"GitHub\",\n // As of 2026-05-07 GitHub still hasn't managed publish a new release of @octokit/graphql-schema\n // which is now almost half a year behind and misses a ton of API changes.\n // See https://github.com/octokit/graphql-schema/issues/1030\n callback: () => fetch(\"https://rawcdn.githack.com/octokit/graphql-schema/refs/heads/schema-update/schema.json\").then(r => r.json()).then(d => d.__schema)\n },\n fly: {\n label: \"Fly.io\",\n // To update, copy the query from queryApolloSchema() into the playground at https://api.fly.io/graphql\n callback: () => FileAttachment(\"flySchema.json.zip\").zip()\n .then(a => a.file(\"flySchema.json\").json())\n .then(d => d.data.__schema)\n },\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"// Schema obtained from introspection queries\nqueryingLoaders = ({\n swapi: {\n label: \"Star Wars\",\n callback: () => queryApolloSchema(\"https://graphql.org/graphql/\")\n },\n countries: {\n label: \"Countries\",\n callback: () => queryApolloSchema(\"https://countries.trevorblades.com/graphql\"),\n },\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"search = (data, {query} = {}) => Inputs.search(data, {\n query,\n filter: q => {\n const s = q.toLowerCase();\n return d => Object.values(d).some(\n d => typeof d === \"string\" ? d.toLowerCase().includes(s)\n : Array.isArray(d) ? d.some(d => d?.name.toLowerCase().includes(s))\n : null\n )\n \n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"listFilter = (typeIndex, accessor, {query = null, ...options} = {}) => {\n const filter = search(accessor(typeIndex), {query});\n const list = html`

`;\n filter.oninput = () => list.replaceChildren(renderList(filter.value, typeIndex, options));\n filter.oninput();\n \n return Object.defineProperty(htl.html`

${filter}${list}`, \"value\", {\n value: () => filter.value\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"createTypeIndex = schema => {\n const byName = values => d3.index(values, d => d.name);\n const kind = Object.fromEntries(\n d3.rollups(schema.types, byName, d => d.kind).sort(([a], [b]) => a.localeCompare(b))\n );\n const q = schema.queryType?.name;\n const m = schema.mutationType?.name; \n const query = q ? byName(kind.OBJECT.get(q).fields) : new Map();\n const mutation = m ? byName(kind.OBJECT.get(m).fields) : new Map();\n kind.OBJECT.delete(q);\n kind.OBJECT.delete(m);\n return {kind, query, mutation, schema, name: byName(schema.types)};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"renderList = (items, typeIndex, {height = \"400px\", scope = DOM.uid().id} = {}) => addCss(\n htl.html`

${renderType(d, {typeIndex, scope})}`)\n }`,\n typeCss() + `\\n:scope-root {\n max-width: 100%;\n list-style: none;\n padding: 0;\n overflow: auto;\n resize: vertical;\n }`,\n {scope}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"applyThemeWrapper = (content, scope, options = {}) => htl.html`
${content}