2d:null 2e:["$","title",null,{"children":"GraphQL Schema Explorer | Fabian Iwand | Observable"}] 33: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)34:T15a2,class TypeRenderer { _typeIndex; _scope; _debug; _html; _decorateName; static render(d, {typeIndex, scope, debug, highlight, html}) { return new TypeRenderer({typeIndex, scope, debug, highlight, html}).render(d); } constructor({typeIndex, scope, debug, html = htl.html, decorateName = (name, type) => name}) { this._typeIndex = typeIndex; this._scope = scope; this._debug = debug; this._html = html; this._decorateName = decorateName; } /** * Renders a value with a collapsed body. * * @param {{ * kind: string; * children: Node | string; * fieldCount?: number; * prefix?: Node | string; * suffix?: Node | string; * tail?: Node | string; * renderBody?: () => Node | string; * }} props */ renderCollapsible({prefix, suffix, tail, fieldCount, children, renderBody}) { const {_html: $, _scope: scope} = this; const $prefix = prefix?.length ? $`${prefix}` : ""; const $suffix = suffix?.length ? $`${suffix}` : ""; const $placeholder = fieldCount === 0 ? $`` : $`…`; const $details = $`

${children}${$prefix}

${$placeholder}

`; if(renderBody) $details.addEventListener("toggle", () => $placeholder.replaceWith(renderBody()), {once: true}); const data = fieldCount != null ? {"data-fields-count": fieldCount} : {}; return $`

${$details}

${$suffix}${tail ?? ""}

`; } /** * Renders a value without a body. * * @param {{ * kind: string; * name: string; * description?: string; * flags?: { * list?: boolean; * required?: boolean * }; * }} props */ renderValue({kind, name, description, flags: {list, required} = {}}) { const {_html: $, _scope: scope} = this; const prefix = list ? "[" : ""; const suffix = (list ? "]" : "") + (required ? "!" : ""); const $name = this._decorateName(name, "value"); return $`${prefix}${$name}${suffix}`; } /** * Renders field labels and values. * * @param {{ * items: { * name: string; * description?: string; * children: Node | string; * }[]; * }} props */ renderFields({items}) { const {_html: $, _scope: scope} = this; const $items = items.map( ({name, description: title, children}) => { const $name = this._decorateName(name, "field"); const $label = $`${$name}: `; return $`

${$label} ${children}

`; } ); return $`

${$items}`; } /** * Renders a list of union members or enum values. * * @param {{ * items: (Node | string)[]; * }} props */ renderUnion({items}) { const {_html: $, _scope: scope} = this; const $items = items.map( (children) => $`

| ${children}

` ); return $`

${$items}`; } unwrapType(type) { if(type.kind === "NON_NULL") return this.unwrapType({...type.ofType, flags: {...type.flags, required: true}}); if(type.kind === "LIST") return this.unwrapType({...type.ofType, flags: {...type.flags, list: true}}); return {...this._typeIndex.name.get(type.name), flags: type.flags ?? {}}; } render(d) { const {_html: $} = this; this._debug?.("render", d, this.unwrapType(d)); if(this._typeIndex.query.has(d.name) || this._typeIndex.mutation.has(d.name)) { const fields = d.args; return this.renderCollapsible({ prefix: "(", suffix: "): ", tail: this.render(this.unwrapType(d.type)), fieldCount: fields.length, children: this.renderValue(d), renderBody: () => this.renderFields({ items: fields.map(f => ({...f, children: this.render(this.unwrapType(f.type))})) }) }); } switch(d.kind) { case "INPUT_OBJECT": case "OBJECT": case "INTERFACE": { const fields = d.inputFields ?? d.fields; return this.renderCollapsible({ prefix: " {", suffix: "}", fieldCount: fields.length, children: this.renderValue(d), renderBody: () => this.renderFields({ items: fields.map(f => ({...f, children: this.render(this.unwrapType(f.type))})) }) }); } case "UNION": { const members = d.possibleTypes; return this.renderCollapsible({ prefix: " {", suffix: "}", fieldCount: members.length, children: this.renderValue(d), renderBody: () => this.renderUnion({ items: members.map(m => this.render(this.unwrapType(m))) }), }); } case "ENUM": { const members = d.enumValues; return this.renderCollapsible({ prefix: " {", suffix: "}", fieldCount: members.length, children: this.renderValue(d), renderBody: () => this.renderUnion({ items: members.map(m => this.renderValue({...m, kind: "ENUM_VALUE"})) }), }); } case "SCALAR": { return this.renderValue(d); } } return `🚧`; } }35:T5b8,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 > *:not(:scope-type-prefix) { 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-name[data-kind="ENUM_VALUE"] { color: var(--syntax-string); } :scope-name[data-kind="SCALAR"] { -color: var(--syntax-atom); } :scope-name[data-kind="INTERFACE"], :scope-name[data-kind="OBJECT"], :scope-name[data-kind="INPUT_OBJECT"] { font-weight: bold } :scope-hl { background-color: yellow } `36:[{"id":"1419f53b9b4c61c505f9020b12ae1f71fe9931bab36eccf5f74e5ec660e1290d23b74385da9ddb65418ef497944f05d52e8e9e2a086ea9be84b3b90fa657b678","href":"https://static.observableusercontent.com/files/1419f53b9b4c61c505f9020b12ae1f71fe9931bab36eccf5f74e5ec660e1290d23b74385da9ddb65418ef497944f05d52e8e9e2a086ea9be84b3b90fa657b678","name":"flySchema.json.zip","type":"application/zip","lastModified":1778156245290.427,"size":48970}] 31:{"id":"4b8a1b950f85a1e9","slug":"graphql-schema","title":"GraphQL Schema Explorer","thumbnail":"d3d3b268dfce9166dc9d64b8c053a0778d29efa463954d6f26e971a2664271c5","access_level":"public","create_time":"$D2023-06-03T10:32:07.409Z","update_time":"$D2026-06-25T08:56:46.266Z","view_time":null,"first_public_time":"$D2024-10-26T18:21:29.556Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":670,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"},{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"e3842c7642c32750","slug":"tools","title":"Tools & Techniques","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"GraphQL Schema Explorer","cells":[{"id":383,"value":"# GraphQL Schema Explorer\n\nDiscover 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 = debounceInput(Inputs.text({\n type: \"search\",\n placeholder: \"Search all\",\n value: params.query,\n autocomplete: \"off\",\n}))","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 Object.assign(\n Inputs.checkbox(Object.keys(typeIndex.kind), {\n value: (schemaSource === this?.__schemaSource && 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 {__schemaSource: schemaSource}\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":"viewof allTypes = {\n const scope = DOM.uid().id;\n const kindSet = new Set(kind);\n \n const renderer = new TypeRenderer({\n typeIndex,\n scope,\n decorateName: createHighlighter(viewof allTypesFiltered.elements[0].value, scope),\n });\n \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) => htl.html`

${renderer.render(arr[i])}`\n },\n required: false,\n multiple: false,\n });\n \n const style = addCss(null, `\n ${typeCss()}\n :scope-hl {\n background-color: yellow;\n }\n `, {scope});\n \n return Object.defineProperty(htl.html`

${table}${style}`, \"value\", {\n get: () => table.value\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"#### Debug output\n\nLogs rendered objects to the console. Select an entry from above to inspect it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":498,"value":"allTypes && debugType(allTypes)","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":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":516,"value":"### Schemas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"### Types","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":176,"value":"typeIndex = createTypeIndex(await schemaSource.callback())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"### Filtering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"search = (data, {query} = {}) => debounceInput(Inputs.search(data, {\n autocomplete: \"off\",\n query,\n filter: q => {\n const s = q.toLowerCase();\n // Don't search props that aren't shown\n const skip = (d, k, v) => d.kind === \"INTERFACE\" && k === \"possibleTypes\";\n return d => Object.entries(d).some(([k, v]) => {\n if(skip(d, k, v)) return null;\n if(typeof v === \"string\") return v.toLowerCase().includes(s);\n if(Array.isArray(v)) return v.some(d => d?.name.toLowerCase().includes(s));\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, {\n query: filter.elements[0].value,\n ...options\n }));\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":552,"value":"function debounceInput(view, delay = 150) {\n class DebouncedEvent extends Event {};\n const dispatch = () => view.dispatchEvent(new DebouncedEvent(\"input\", {bubbles: true}));\n let id;\n view.addEventListener(\"input\", (e) => {\n if(e instanceof DebouncedEvent) return;\n e.stopImmediatePropagation();\n clearTimeout(id);\n id = setTimeout(dispatch, delay);\n });\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"### Rendering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"function renderList(items, typeIndex, {query = \"\", height = \"400px\", scope = DOM.uid().id} = {}) {\n const renderer = new TypeRenderer({\n typeIndex,\n scope,\n decorateName: createHighlighter(query, scope),\n });\n const list = htl.html`

${renderer.render(d)}`)\n }`;\n const css = `\n${typeCss()}\n:scope-root {\n max-width: 100%;\n list-style: none;\n padding: 0;\n overflow: auto;\n resize: vertical;\n}\n `;\n \n return addCss(list, css, {scope});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"addCss = (element, css, {scope = DOM.uid().id} = {}) => {\n const style = htl.html`