GraphiQL 4 with React 19 and GraphiQL Explorer

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_212":213,"_214":215},"routes/_app.x.$handle.$name",{"_97":96,"_32":44,"_105":84,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":118,"_119":120,"_121":48,"_122":123,"_124":25,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":48,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":48,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":48},"version",3,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",true,"deletedHere","path","02-calling-apis.ts","latestPath","fileId","01a066da-14da-777f-b159-5b0aad0d6b4a","name","fileType","http","content","import { getArticle } from \"./_api.ts\";\nimport { createServer } from \"./_server.ts\";\n\nconst typeDefs = `\nscalar JSON\n\ntype Query {\n article(id: Int!): JSON\n}\n`;\n\nconst resolvers = {\n Query: {\n article: (_, args) => getArticle(args.id),\n },\n};\n\nexport const handler = await createServer(\n typeDefs,\n resolvers,\n `\nquery {\n article(id: 0)\n} \n`,\n);","createdAt",["D",1788432301900],"branchVersion","branchId","95857aad-eae7-41f5-b625-6f09c5f02e7e","id","b87b5008-b130-4e33-8c91-46d9f07b73b0","lazy-content-model",["D",1788431963286],"deletedAt","legacyEnvVars",false,"privacy","public","httpPrivacy","description","imageUrl","6c391ee0-4213-11f0-b47d-130946788076","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","5f48d3e7-8fbc-497c-b83c-47763c2fa1d3","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":54,"_101":102,"_103":48},"branch",{"_13":83,"_32":84,"_42":41,"_85":43,"_86":87,"_88":89,"_90":50,"_91":92,"_93":62,"_94":44,"_95":96},"isOwned",17,"main","projectId","forkedBranchId","854dec58-4213-11f0-ba4f-76b3cceeab13","forkedBranchVersion",99,"forkedProjectPrivacy","forkedProjectId","854da518-4213-11f0-ba4f-76b3cceeab13","forkedProjectOrgId","projectName","userHandle","apaleslimghost","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yeTVqNzlNUVlaOVBRSXpjSFoza0VqbUVrZ00ifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":208,"_46":-5,"_47":48,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":48,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":209,"_78":210,"_80":211,"_82":48},"tree",[187,188,189,190,191],"files",[187,188,189,190,191],"counts",{"_177":60,"_178":145,"_179":60,"_180":181,"_182":183},"contents",[136,137,138,139,140],"upstreamProject",{"_42":92,"_32":134,"_52":-5,"_53":-5,"_49":50,"_76":135},"upstreamBranch",{"_42":87,"_37":129,"_130":131,"_32":84,"_85":92,"_13":89,"_86":-5,"_88":-5,"_132":133,"_46":-5,"_82":48,"_49":50,"_95":96,"_61":62,"_94":134},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1749131205673],"updatedAt",["D",1750072689417],"lockfileKey","1750072689798-esm.town_v_apaleslimghost_graphql-crash-course@99-main","graphql-crash-course",{"_97":96,"_104":100},{"_42":171,"_32":172,"_30":173,"_144":-5,"_40":41,"_39":145,"_146":48,"_37":174,"_13":60,"_33":34,"_35":175,"_24":48,"_150":-5,"_27":176},{"_42":165,"_32":166,"_30":167,"_144":-5,"_40":41,"_39":145,"_146":48,"_37":168,"_13":60,"_33":34,"_35":169,"_24":48,"_150":-5,"_27":170},{"_42":159,"_32":160,"_30":161,"_144":-5,"_40":41,"_39":145,"_146":48,"_37":162,"_13":60,"_33":34,"_35":163,"_24":48,"_150":-5,"_27":164},{"_42":152,"_32":153,"_30":154,"_144":-5,"_40":41,"_39":155,"_146":48,"_37":156,"_13":145,"_33":148,"_35":157,"_24":48,"_150":-5,"_27":158},{"_42":141,"_32":142,"_30":143,"_144":-5,"_40":41,"_39":145,"_146":25,"_37":147,"_13":60,"_33":148,"_35":149,"_24":48,"_150":-5,"_27":151},"568486b2-5de4-49c6-a6c9-6b92cd5df31c","_server.ts","01a066da-14da-777f-b159-691781af24af","parentId",1,"latest",["D",1788431963286],"script","import { ApolloServer, HeaderMap, HTTPGraphQLRequest } from \"npm:@apollo/server\";\n\nconst graphIQLMarkup = (query) => `\n\n\n\n \n \n \n GraphiQL 4 with React 19 and GraphiQL Explorer\n \n \n \n \n \n \n \n

Loading…

\n \n\n`;\n\nexport async function createServer(typeDefs: any, resolvers: any, query: string = \"\") {\n const server = new ApolloServer({\n typeDefs,\n resolvers,\n introspection: true,\n csrfPrevention: false,\n plugins: [\n {\n async serverWillStart() {\n return {\n async renderLandingPage() {\n return { html: graphIQLMarkup(query) };\n },\n };\n },\n },\n ],\n });\n\n await server.start();\n\n return async function handler(request: Request) {\n const url = new URL(request.url);\n if (url.pathname !== \"/\") return new Response(\"\", { status: 404 });\n\n const body = request.method === \"POST\" ? await request.json() : {};\n\n const httpGraphQLRequest: HTTPGraphQLRequest = {\n method: request.method,\n headers: new HeaderMap(request.headers.entries()),\n search: url.search,\n body,\n };\n\n const response = await server\n .executeHTTPGraphQLRequest({\n httpGraphQLRequest,\n context: () => ({}),\n });\n\n return new Response(\n response.body.kind === \"complete\" ? response.body.string : response.body.asyncIterator,\n {\n status: response.status ?? 200,\n headers: {\n ...Object.fromEntries(response.headers.entries()),\n \"content-type\": response.headers.has(\"content-type\")\n ? response.headers.get(\"content-type\")\n : \"application/json\",\n },\n },\n );\n };\n}","label",[142],"b10b20ff-b964-45b8-8764-79c94f62987e","_api.ts","01a066da-14da-777f-b159-67bd0b2c1ca1",2,["D",1788432075490],"import { setTimeout } from \"node:timers/promises\";\n\nconst articles = [{\n id: 0,\n title: \"A Crash Course in GraphQL\",\n date: new Date(2025, 6, 16),\n body:\n \"So you’ve heard of GraphQL. Maybe you’ve run a few queries on Biz Ops or cp-content-pipeline. But you’ve got that itch at the base of your skull every time you look at GraphQL that says “okay but what’s actually going on here? what’s it doing?”.\",\n authors: [0],\n}];\n\nconst authors = [{\n id: 0,\n name: \"Kara Brightwell\",\n}];\n\nexport const getArticleSimple = async (id) => {\n await setTimeout(500);\n if (!articles[id]) throw new Error(`article ${id} not found`);\n return {\n ...articles[id],\n body: null,\n };\n};\n\nexport const getArticle = async (id) => {\n await setTimeout(1000);\n if (!articles[id]) throw new Error(`article ${id} not found`);\n return articles[id];\n};\n\nexport const getAuthor = async (id) => {\n await setTimeout(1000);\n if (!authors[id]) throw new Error(`author ${id} not found`);\n return authors[id];\n};",[153],"9c322fd6-5a0c-42e3-b30e-8f40d6d336ef","04-nested-resolution.ts","01a066da-14da-777f-b159-604412783823",["D",1788431963286],"import { getArticle, getAuthor } from \"./_api.ts\";\nimport { createServer } from \"./_server.ts\";\n\nconst typeDefs = `\ntype Author {\n id: Int!\n name: String!\n}\n\ntype Article {\n id: Int!\n title: String!\n body: String!\n date: String!\n authors: [Author!]!\n}\n\ntype Query {\n article(id: Int!): Article\n}\n`;\n\nconst resolvers = {\n Query: {\n article: (_, args) => getArticle(args.id),\n },\n Article: {\n date: (article) => article.date.toLocaleString(\"en-GB\", { dateStyle: \"short\" }),\n authors: (article) => Promise.all(article.authors.map(getAuthor)),\n },\n};\n\nexport const handler = await createServer(\n typeDefs,\n resolvers,\n `\nquery {\n article(id: 0) {\n authors {\n id\n name\n }\n }\n} \n`,\n);",[160],"0df48d3d-36b0-42ed-9185-139c2a55b0f0","03-modelling-data.ts","01a066da-14da-777f-b159-5eb1db90a5ca",["D",1788431963286],"import { getArticle } from \"./_api.ts\";\nimport { createServer } from \"./_server.ts\";\n\nconst typeDefs = `\nscalar JSON\n\ntype Article {\n id: Int!\n title: String!\n body: String!\n date: String!\n authors: JSON\n}\n\ntype Query {\n article(id: Int!): Article\n}\n`;\n\nconst resolvers = {\n Query: {\n article: (_, args) => getArticle(args.id),\n },\n Article: {\n date: (article) => article.date.toLocaleString(\"en-GB\", { dateStyle: \"short\" }),\n },\n};\n\nexport const handler = await createServer(\n typeDefs,\n resolvers,\n `\nquery {\n article(id: 0) {\n id\n title\n body\n date\n authors\n }\n} \n`,\n);",[166],"e9dcba75-7ee7-49f4-8768-58bb79e7a99d","01-hello-graphql.ts","01a066da-14da-777f-b159-54d1178a319b",["D",1788431963286],"import { createServer } from \"./_server.ts\";\n\nconst typeDefs = `\ntype Query {\n hello: String\n}\n`;\n\nconst resolvers = {\n Query: {\n hello: () => \"world\",\n },\n};\n\nexport const handler = await createServer(\n typeDefs,\n resolvers,\n `\nquery {\n hello \n}`,\n);",[172],"pulls","branches","forks","envVars",{"_184":60,"_186":60},"connections",{"_184":60,"_185":60},"count","unfilledCount","emptyCount",{"_42":171,"_32":172,"_30":173,"_144":-5,"_40":41,"_39":145,"_146":48,"_37":205,"_13":60,"_33":34,"_35":175,"_24":48,"_150":-5,"_193":206,"_27":207},{"_42":165,"_32":166,"_30":167,"_144":-5,"_40":41,"_39":145,"_146":48,"_37":202,"_13":60,"_33":34,"_35":169,"_24":48,"_150":-5,"_193":203,"_27":204},{"_42":159,"_32":160,"_30":161,"_144":-5,"_40":41,"_39":145,"_146":48,"_37":199,"_13":60,"_33":34,"_35":163,"_24":48,"_150":-5,"_193":200,"_27":201},{"_42":152,"_32":153,"_30":154,"_144":-5,"_40":41,"_39":155,"_146":48,"_37":196,"_13":145,"_33":148,"_35":157,"_24":48,"_150":-5,"_193":197,"_27":198},{"_42":141,"_32":142,"_30":143,"_144":-5,"_40":41,"_39":145,"_146":25,"_37":192,"_13":60,"_33":148,"_35":149,"_24":48,"_150":-5,"_193":194,"_27":195},["D",1788431963286],"children",[],[142],["D",1788432075490],[],[153],["D",1788431963286],[],[160],["D",1788431963286],[],[166],["D",1788431963286],[],[172],["D",1788431963286],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":54,"_101":102,"_103":48},{"_13":83,"_32":84,"_42":41,"_85":43,"_86":87,"_88":89,"_90":50,"_91":92,"_93":62,"_94":44,"_95":96},"ctx",{"_76":-5,"_126":245,"_246":247,"_248":249,"_250":48,"_251":48,"_252":48,"_253":25,"_254":-5,"_255":-7,"_256":-7,"_257":60,"_258":48,"_259":48,"_260":-5,"_261":48,"_262":48,"_263":48,"_264":-5},"ENV",{"_216":217,"_218":219,"_220":84,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v3