GraphiQL 4 with React 19 and GraphiQL Explorer

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_213":214,"_215":216},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_65":168,"_16":-7,"_169":-5,"_17":170,"_171":172,"_29":173,"_21":174,"_23":175,"_176":-5,"_177":178,"_179":180,"_181":39,"_182":183,"_184":37,"_185":-5,"_186":-5,"_187":188},"routes/_app.x.$handle.$name._index",{"_11":12,"_13":14,"_15":-7,"_16":-7,"_17":18,"_19":20,"_21":22,"_23":24,"_25":-7,"_26":27,"_28":-5,"_29":30,"_31":-5,"_32":33,"_34":35,"_36":37,"_38":39,"_40":37},"handle","apaleslimghost","name","lazy-content-model","branchName","version","project",{"_44":126,"_13":14,"_55":127,"_98":-5,"_128":39,"_100":101,"_129":101,"_130":-5,"_131":-5,"_132":133,"_134":-5,"_135":39,"_136":-5,"_137":-5,"_138":35,"_103":104,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":144,"_145":144,"_146":147,"_148":147,"_149":147,"_150":144,"_151":144,"_152":153,"_154":155,"_156":157,"_99":39},"tags",[],"counts",{"_116":35,"_117":53,"_118":35,"_119":120,"_121":122},"contents",[107,108,109],"readme","upstream",{"_44":86,"_55":87,"_88":89,"_13":90,"_91":92,"_16":93,"_94":-5,"_95":-5,"_96":97,"_98":-5,"_99":39,"_100":101,"_102":12,"_103":104,"_105":106},"pull","files",[41,42,43],"preview","ahead",16,"behind",0,"showHomeCustomizationHint",true,"showHTTPPreviewSettingsHint",false,"hasHTTPFiles",{"_44":76,"_13":77,"_47":78,"_49":-5,"_50":51,"_52":79,"_54":37,"_55":80,"_16":81,"_57":82,"_59":83,"_61":39,"_62":-5,"_63":84,"_65":85},{"_44":67,"_13":68,"_47":69,"_49":-5,"_50":51,"_52":70,"_54":37,"_55":71,"_16":72,"_57":58,"_59":73,"_61":39,"_62":-5,"_63":74,"_65":75},{"_44":45,"_13":46,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":37,"_55":56,"_16":35,"_57":58,"_59":60,"_61":39,"_62":-5,"_63":64,"_65":66},"id","568486b2-5de4-49c6-a6c9-6b92cd5df31c","_server.ts","fileId","01a066da-14da-777f-b159-691781af24af","parentId","branchId","95857aad-eae7-41f5-b625-6f09c5f02e7e","branchVersion",1,"latest","createdAt",["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","children",[],"path",[46],"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}",[],[68],"f9595f49-2901-491d-9c8a-cd78245d1999","03-modelling-data.ts","01a066da-14da-777f-b159-5eb1db90a5ca",17,["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);",[],[77],"854dec58-4213-11f0-ba4f-76b3cceeab13",["D",1749131205673],"updatedAt",["D",1750072689417],"main","projectId","854da518-4213-11f0-ba4f-76b3cceeab13",99,"forkedBranchId","forkedBranchVersion","lockfileKey","1750072689798-esm.town_v_apaleslimghost_graphql-crash-course@99-main","deletedAt","isOwned","privacy","public","userHandle","orgId","5f48d3e7-8fbc-497c-b83c-47763c2fa1d3","projectName","graphql-crash-course",{"_44":76,"_13":77,"_47":78,"_49":-5,"_50":51,"_52":79,"_54":37,"_55":114,"_16":81,"_57":82,"_59":83,"_61":39,"_62":-5,"_65":115},{"_44":67,"_13":68,"_47":69,"_49":-5,"_50":51,"_52":70,"_54":37,"_55":112,"_16":72,"_57":58,"_59":73,"_61":39,"_62":-5,"_65":113},{"_44":45,"_13":46,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":37,"_55":110,"_16":35,"_57":58,"_59":60,"_61":39,"_62":-5,"_65":111},["D",1788431963286],[46],["D",1788433471683],[68],["D",1788433500591],[77],"pulls","branches","forks","envVars",{"_123":35,"_125":35},"connections",{"_123":35,"_124":35},"count","unfilledCount","emptyCount","b87b5008-b130-4e33-8c91-46d9f07b73b0",["D",1788431963286],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","6c391ee0-4213-11f0-b47d-130946788076","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_167":163},"org",{"_11":12,"_161":-5,"_162":163,"_132":133,"_164":165,"_166":39},"branch",{"_16":79,"_13":90,"_44":51,"_91":126,"_94":86,"_95":93,"_158":101,"_159":92,"_160":104,"_105":14,"_102":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yeTVqNzlNUVlaOVBRSXpjSFoza0VqbUVrZ00ifQ","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_44":126,"_13":14,"_55":209,"_98":-5,"_128":39,"_100":101,"_129":101,"_130":-5,"_131":-5,"_132":133,"_134":-5,"_135":39,"_136":-5,"_137":-5,"_138":35,"_103":104,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":144,"_145":144,"_146":147,"_148":147,"_149":147,"_150":144,"_151":144,"_152":210,"_154":211,"_156":212,"_99":39},"tree",[200,201,202],[200,201,202],{"_116":35,"_117":53,"_118":35,"_119":198,"_121":199},[192,193,194],"file","upstreamProject",{"_44":92,"_13":106,"_130":-5,"_131":-5,"_100":101,"_152":191},"upstreamBranch",{"_44":86,"_55":189,"_88":190,"_13":90,"_91":92,"_16":93,"_94":-5,"_95":-5,"_96":97,"_98":-5,"_99":39,"_100":101,"_102":12,"_103":104,"_105":106},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1749131205673],["D",1750072689417],{"_11":12,"_167":163},{"_44":76,"_13":77,"_47":78,"_49":-5,"_50":51,"_52":79,"_54":37,"_55":114,"_16":81,"_57":82,"_59":83,"_61":39,"_62":-5,"_65":197},{"_44":67,"_13":68,"_47":69,"_49":-5,"_50":51,"_52":70,"_54":37,"_55":112,"_16":72,"_57":58,"_59":73,"_61":39,"_62":-5,"_65":196},{"_44":45,"_13":46,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":37,"_55":110,"_16":35,"_57":58,"_59":60,"_61":39,"_62":-5,"_65":195},[46],[68],[77],{"_123":35,"_125":35},{"_123":35,"_124":35},{"_44":76,"_13":77,"_47":78,"_49":-5,"_50":51,"_52":79,"_54":37,"_55":80,"_16":81,"_57":82,"_59":83,"_61":39,"_62":-5,"_63":207,"_65":208},{"_44":67,"_13":68,"_47":69,"_49":-5,"_50":51,"_52":70,"_54":37,"_55":71,"_16":72,"_57":58,"_59":73,"_61":39,"_62":-5,"_63":205,"_65":206},{"_44":45,"_13":46,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":37,"_55":56,"_16":35,"_57":58,"_59":60,"_61":39,"_62":-5,"_63":203,"_65":204},[],[46],[],[68],[],[77],["D",1788431963286],{"_11":12,"_167":163},{"_11":12,"_161":-5,"_162":163,"_132":133,"_164":165,"_166":39},{"_16":79,"_13":90,"_44":51,"_91":126,"_94":86,"_95":93,"_158":101,"_159":92,"_160":104,"_105":14,"_102":12},"ctx",{"_152":-5,"_186":246,"_247":248,"_249":250,"_251":39,"_252":39,"_253":39,"_254":37,"_255":-5,"_256":-7,"_257":-7,"_258":35,"_259":39,"_260":39,"_261":-5,"_262":39,"_263":39,"_264":39,"_265":-5},"ENV",{"_217":218,"_219":220,"_221":90,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245},"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"]