GraphiQL 4 with React 19 and GraphiQL Explorer

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_183":184,"_185":186},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_89":-7,"_90":91,"_29":-7,"_92":-5,"_15":93,"_94":95,"_96":97,"_98":99,"_100":101,"_102":-5,"_103":104,"_105":106,"_107":40,"_108":109,"_110":111,"_112":-5,"_113":-5,"_114":115},"routes/_app.x.$handle.$name.branches",{"_11":12,"_13":14,"_15":16,"_17":18},"handle","apaleslimghost","name","lazy-content-model","project",{"_20":28,"_13":14,"_22":38,"_37":-5,"_39":40,"_41":42,"_43":42,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":40,"_50":-5,"_51":-5,"_52":53,"_54":55,"_56":-5,"_57":-5,"_58":-5,"_59":-5,"_60":61,"_62":61,"_63":64,"_65":64,"_66":64,"_67":61,"_68":61,"_69":70,"_71":72,"_73":74,"_75":40},"branches",[19],{"_20":21,"_22":23,"_24":25,"_13":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":-5},"id","95857aad-eae7-41f5-b625-6f09c5f02e7e","createdAt",["D",1788431963286],"updatedAt",["D",1788433500591],"main","projectId","b87b5008-b130-4e33-8c91-46d9f07b73b0","version",17,"forkedBranchId","854dec58-4213-11f0-ba4f-76b3cceeab13","forkedBranchVersion",99,"lockfileKey","1788433500944-esm.town_v_apaleslimghost_lazy-content-model@17-main","deletedAt",["D",1788431963286],"legacyEnvVars",false,"privacy","public","httpPrivacy","description","imageUrl","userId","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",{"_11":12,"_88":84},"org",{"_11":12,"_82":-5,"_83":84,"_46":47,"_85":86,"_87":40},"branch",{"_29":30,"_13":26,"_20":21,"_27":28,"_31":32,"_33":34,"_76":42,"_77":78,"_79":55,"_80":14,"_81":12},"isOwned","forkedProjectPrivacy","forkedProjectId","854da518-4213-11f0-ba4f-76b3cceeab13","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yeTVqNzlNUVlaOVBRSXpjSFoza0VqbUVrZ00ifQ","tier","free","canRestrictVals","profileImageUrl","branchName","path","","adoptOrgId",{"_20":28,"_13":14,"_22":179,"_37":-5,"_39":40,"_41":42,"_43":42,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":40,"_50":-5,"_51":-5,"_52":53,"_54":55,"_56":-5,"_57":-5,"_58":-5,"_59":-5,"_60":61,"_62":61,"_63":64,"_65":64,"_66":64,"_67":61,"_68":61,"_69":180,"_71":181,"_73":182,"_75":40},"tree",[166,167,168],"files",[166,167,168],"counts",{"_157":53,"_17":131,"_158":53,"_159":160,"_161":162},"contents",[121,122,123],"file","upstreamProject",{"_20":78,"_13":119,"_44":-5,"_45":-5,"_41":42,"_69":120},"upstreamBranch",{"_20":32,"_22":116,"_24":117,"_13":26,"_27":78,"_29":34,"_31":-5,"_33":-5,"_35":118,"_37":-5,"_75":40,"_41":42,"_81":12,"_54":55,"_80":119},"emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},["D",1749131205673],["D",1750072689417],"1750072689798-esm.town_v_apaleslimghost_graphql-crash-course@99-main","graphql-crash-course",{"_11":12,"_88":84},{"_20":149,"_13":150,"_126":151,"_128":-5,"_129":21,"_130":30,"_132":111,"_22":152,"_29":153,"_134":154,"_136":155,"_138":40,"_139":-5,"_90":156},{"_20":141,"_13":142,"_126":143,"_128":-5,"_129":21,"_130":144,"_132":111,"_22":145,"_29":146,"_134":135,"_136":147,"_138":40,"_139":-5,"_90":148},{"_20":124,"_13":125,"_126":127,"_128":-5,"_129":21,"_130":131,"_132":111,"_22":133,"_29":53,"_134":135,"_136":137,"_138":40,"_139":-5,"_90":140},"568486b2-5de4-49c6-a6c9-6b92cd5df31c","_server.ts","fileId","01a066da-14da-777f-b159-691781af24af","parentId","branchId","branchVersion",1,"latest",["D",1788431963286],"fileType","script","content","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}","deleted","label",[125],"450aeb8e-307c-4cc2-b907-3f7d1efd2942","_api.ts","01a066da-14da-777f-b159-67bd0b2c1ca1",15,["D",1788433471683],5,"import { setTimeout } from \"node:timers/promises\";\n\nexport type ArticleResponse = {\n id: number;\n title: string;\n body: string | null;\n date: Date;\n authors: number[];\n};\n\nconst articles: ArticleResponse[] = [{\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\nexport class ArticleModel {\n private data?: ArticleResponse;\n private type?: \"full\" | \"simple\";\n #id: number;\n\n constructor(id: number) {\n this.#id = id;\n }\n\n async getArticle(type: \"full\" | \"simple\") {\n await setTimeout(type === \"full\" ? 1000 : 100);\n if (!articles[this.#id]) throw new Error(`author ${this.id} not found`);\n\n this.data = type === \"full\"\n ? articles[this.#id]\n : { ...articles[this.#id], body: null };\n this.type = type;\n }\n\n withData(\n type: \"full\" | \"simple\",\n getter: (data: ArticleResponse, args?: A) => T,\n ) {\n return async (args: A) => {\n if (!this.data || this.type !== type) {\n await this.getArticle(type);\n }\n\n return getter(this.data, args);\n };\n }\n\n body = this.withData(\"full\", (data) => data.body);\n title = this.withData(\"simple\", (data) => data.title);\n id = this.withData(\"simple\", (data) => data.id);\n date = this.withData(\"simple\", (data) => data.date);\n authors = this.withData(\"simple\", (data) => data.authors);\n}",[142],"f9595f49-2901-491d-9c8a-cd78245d1999","03-modelling-data.ts","01a066da-14da-777f-b159-5eb1db90a5ca",["D",1788433500591],8,"http","import { ArticleModel } 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: { id: number }) => new ArticleModel(args.id),\n },\n Article: {\n date: async (article: ArticleModel, args) =>\n (await article.date(args)).toLocaleString(\"en-GB\", {\n dateStyle: \"short\",\n }),\n },\n};\n\nexport const handler = await createServer(\n typeDefs,\n resolvers,\n `\nquery {\n article(id: 0) {\n id\n title\n body # remove me\n date\n authors\n }\n} \n`,\n);",[150],"pulls","forks","envVars",{"_163":53,"_165":53},"connections",{"_163":53,"_164":53},"count","unfilledCount","emptyCount",{"_20":149,"_13":150,"_126":151,"_128":-5,"_129":21,"_130":30,"_132":111,"_22":176,"_29":153,"_134":154,"_136":155,"_138":40,"_139":-5,"_170":177,"_90":178},{"_20":141,"_13":142,"_126":143,"_128":-5,"_129":21,"_130":144,"_132":111,"_22":173,"_29":146,"_134":135,"_136":147,"_138":40,"_139":-5,"_170":174,"_90":175},{"_20":124,"_13":125,"_126":127,"_128":-5,"_129":21,"_130":131,"_132":111,"_22":169,"_29":53,"_134":135,"_136":137,"_138":40,"_139":-5,"_170":171,"_90":172},["D",1788431963286],"children",[],[125],["D",1788433471683],[],[142],["D",1788433500591],[],[150],["D",1788431963286],{"_11":12,"_88":84},{"_11":12,"_82":-5,"_83":84,"_46":47,"_85":86,"_87":40},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":32,"_33":34,"_76":42,"_77":78,"_79":55,"_80":14,"_81":12},"ctx",{"_69":-5,"_113":216,"_217":218,"_219":220,"_221":40,"_222":40,"_223":40,"_224":111,"_225":-5,"_226":-7,"_227":-7,"_228":53,"_229":40,"_230":40,"_231":-5,"_232":40,"_233":40,"_234":40,"_235":-5},"ENV",{"_187":188,"_189":190,"_191":26,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215},"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"]

Branches1

Branches
1