GraphiQL 4 with React 19 and GraphiQL Explorer

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_180":181,"_182":183},"routes/_app.x.$handle.$name",{"_16":17,"_20":21,"_84":64,"_85":86,"_62":-7,"_87":-5,"_13":88,"_89":90,"_11":91,"_92":93,"_94":95,"_96":-5,"_97":98,"_99":100,"_101":26,"_102":103,"_104":105,"_106":-5,"_107":-5,"_108":109},"routes/_app.x.$handle.$name.search.$(branch)",{"_11":12,"_13":14,"_15":-5,"_16":17},"files",[],"project",{"_18":19,"_20":21,"_22":23,"_24":-5,"_25":26,"_27":28,"_29":28,"_30":-5,"_31":-5,"_32":33,"_34":-5,"_35":26,"_36":-5,"_37":-5,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":-5,"_45":-5,"_46":47,"_48":47,"_49":50,"_51":50,"_52":50,"_53":47,"_54":47,"_55":56,"_57":58,"_59":60,"_61":26},"query","handle","apaleslimghost","id","b87b5008-b130-4e33-8c91-46d9f07b73b0","name","lazy-content-model","createdAt",["D",1788431963286],"deletedAt","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",{"_16":17,"_83":79},"org",{"_16":17,"_77":-5,"_78":79,"_32":33,"_80":81,"_82":26},"branch",{"_62":63,"_20":64,"_18":65,"_66":19,"_67":68,"_69":70,"_71":28,"_72":73,"_74":41,"_75":21,"_76":17},"isOwned","version",17,"main","95857aad-eae7-41f5-b625-6f09c5f02e7e","projectId","forkedBranchId","854dec58-4213-11f0-ba4f-76b3cceeab13","forkedBranchVersion",99,"forkedProjectPrivacy","forkedProjectId","854da518-4213-11f0-ba4f-76b3cceeab13","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yeTVqNzlNUVlaOVBRSXpjSFoza0VqbUVrZ00ifQ","tier","free","canRestrictVals","profileImageUrl","branchName","path","","adoptOrgId",{"_18":19,"_20":21,"_22":176,"_24":-5,"_25":26,"_27":28,"_29":28,"_30":-5,"_31":-5,"_32":33,"_34":-5,"_35":26,"_36":-5,"_37":-5,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":-5,"_45":-5,"_46":47,"_48":47,"_49":50,"_51":50,"_52":50,"_53":47,"_54":47,"_55":177,"_57":178,"_59":179,"_61":26},"tree",[163,164,165],[163,164,165],"counts",{"_153":39,"_154":127,"_155":39,"_156":157,"_158":159},"contents",[117,118,119],"file","upstreamProject",{"_18":73,"_20":115,"_30":-5,"_31":-5,"_27":28,"_55":116},"upstreamBranch",{"_18":68,"_22":110,"_111":112,"_20":64,"_66":73,"_62":70,"_67":-5,"_69":-5,"_113":114,"_24":-5,"_61":26,"_27":28,"_76":17,"_40":41,"_75":115},"emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},["D",1749131205673],"updatedAt",["D",1750072689417],"lockfileKey","1750072689798-esm.town_v_apaleslimghost_graphql-crash-course@99-main","graphql-crash-course",{"_16":17,"_83":79},{"_18":145,"_20":146,"_122":147,"_124":-5,"_125":65,"_126":63,"_128":105,"_22":148,"_62":149,"_130":150,"_132":151,"_134":26,"_135":-5,"_85":152},{"_18":137,"_20":138,"_122":139,"_124":-5,"_125":65,"_126":140,"_128":105,"_22":141,"_62":142,"_130":131,"_132":143,"_134":26,"_135":-5,"_85":144},{"_18":120,"_20":121,"_122":123,"_124":-5,"_125":65,"_126":127,"_128":105,"_22":129,"_62":39,"_130":131,"_132":133,"_134":26,"_135":-5,"_85":136},"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",[121],"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}",[138],"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);",[146],"pulls","branches","forks","envVars",{"_160":39,"_162":39},"connections",{"_160":39,"_161":39},"count","unfilledCount","emptyCount",{"_18":145,"_20":146,"_122":147,"_124":-5,"_125":65,"_126":63,"_128":105,"_22":173,"_62":149,"_130":150,"_132":151,"_134":26,"_135":-5,"_167":174,"_85":175},{"_18":137,"_20":138,"_122":139,"_124":-5,"_125":65,"_126":140,"_128":105,"_22":170,"_62":142,"_130":131,"_132":143,"_134":26,"_135":-5,"_167":171,"_85":172},{"_18":120,"_20":121,"_122":123,"_124":-5,"_125":65,"_126":127,"_128":105,"_22":166,"_62":39,"_130":131,"_132":133,"_134":26,"_135":-5,"_167":168,"_85":169},["D",1788431963286],"children",[],[121],["D",1788433471683],[],[138],["D",1788433500591],[],[146],["D",1788431963286],{"_16":17,"_83":79},{"_16":17,"_77":-5,"_78":79,"_32":33,"_80":81,"_82":26},{"_62":63,"_20":64,"_18":65,"_66":19,"_67":68,"_69":70,"_71":28,"_72":73,"_74":41,"_75":21,"_76":17},"ctx",{"_55":-5,"_107":213,"_214":215,"_216":217,"_218":26,"_219":26,"_220":26,"_221":105,"_222":-5,"_223":-7,"_224":-7,"_225":39,"_226":26,"_227":26,"_228":-5,"_229":26,"_230":26,"_231":26,"_232":-5},"ENV",{"_184":185,"_186":187,"_188":64,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212},"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"]

Search