[{"data":1,"prerenderedAt":1144},["ShallowReactive",2],{"navigation_docs":3,"-going-further-codegen":134,"-going-further-codegen-surround":1139},[4,31,77,108],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"Getting Started","i-lucide-play","\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-home",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-plug",{"title":21,"path":22,"stem":23,"icon":24},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F4.usage","i-lucide-code",{"title":26,"path":27,"stem":28,"icon":29},"Editor","\u002Fgetting-started\u002Feditor","1.getting-started\u002F5.editor","i-lucide-wrench",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"Essentials","i-lucide-book","\u002Fessentials","2.essentials",[37,42,47,52,57,62,67,72],{"title":38,"path":39,"stem":40,"icon":41},"Setup Shopify","\u002Fessentials\u002Fsetup-shopify","2.essentials\u002F1.setup-shopify","i-lucide-shopping-bag",{"title":43,"path":44,"stem":45,"icon":46},"Module Config","\u002Fessentials\u002Fconfiguration","2.essentials\u002F2.configuration","i-lucide-anvil",{"title":48,"path":49,"stem":50,"icon":51},"Storefront API","\u002Fessentials\u002Fstorefront","2.essentials\u002F3.storefront","i-lucide-store",{"title":53,"path":54,"stem":55,"icon":56},"Customer API","\u002Fessentials\u002Fcustomer-account","2.essentials\u002F4.customer-account","i-lucide-user",{"title":58,"path":59,"stem":60,"icon":61},"Admin API","\u002Fessentials\u002Fadmin","2.essentials\u002F5.admin","i-lucide-shield",{"title":63,"path":64,"stem":65,"icon":66},"Error Handling","\u002Fessentials\u002Ferror-handling","2.essentials\u002F6.error-handling","i-lucide-bug",{"title":68,"path":69,"stem":70,"icon":71},"Caching","\u002Fessentials\u002Fcaching","2.essentials\u002F7.caching","i-lucide-rabbit",{"title":73,"path":74,"stem":75,"icon":76},"Analytics","\u002Fessentials\u002Fanalytics","2.essentials\u002F8.analytics","i-lucide-chart-line",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":30},"Examples","i-lucide-chef-hat","\u002Fexamples","3.examples",[83,88,93,98,103],{"title":84,"path":85,"stem":86,"icon":87},"Navigation Menu","\u002Fexamples\u002Fnavigation-tree","3.examples\u002F1.navigation-tree","i-lucide-menu",{"title":89,"path":90,"stem":91,"icon":92},"Collection Page","\u002Fexamples\u002Fcollection-page","3.examples\u002F2.collection-page","i-lucide-group",{"title":94,"path":95,"stem":96,"icon":97},"Collection Filters","\u002Fexamples\u002Fcollection-filters","3.examples\u002F3.collection-filters","i-lucide-funnel",{"title":99,"path":100,"stem":101,"icon":102},"Product Page","\u002Fexamples\u002Fproduct-page","3.examples\u002F4.product-page","i-lucide-shirt",{"title":104,"path":105,"stem":106,"icon":107},"Using the Cart","\u002Fexamples\u002Fcart","3.examples\u002F5.cart","i-lucide-shopping-cart",{"title":109,"icon":110,"path":111,"stem":112,"children":113,"page":30},"Going Further","i-lucide-pickaxe","\u002Fgoing-further","4.going-further",[114,119,124,129],{"title":115,"path":116,"stem":117,"icon":118},"Hooks","\u002Fgoing-further\u002Fhooks","4.going-further\u002F1.hooks","i-lucide-between-horizontal-start",{"title":120,"path":121,"stem":122,"icon":123},"Codegen","\u002Fgoing-further\u002Fcodegen","4.going-further\u002F2.codegen","i-lucide-wand-sparkles",{"title":125,"path":126,"stem":127,"icon":128},"GraphQL Explorer","\u002Fgoing-further\u002Fexplorer","4.going-further\u002F3.explorer","i-lucide-app-window",{"title":130,"path":131,"stem":132,"icon":133},"Webhooks","\u002Fgoing-further\u002Fwebhooks","4.going-further\u002F4.webhooks","i-lucide-fishing-hook",{"id":135,"title":120,"body":136,"description":1132,"extension":1133,"links":1134,"meta":1135,"navigation":1136,"path":121,"seo":1137,"stem":122,"__hash__":1138},"docs\u002F4.going-further\u002F2.codegen.md",{"type":137,"value":138,"toc":1123},"minimark",[139,148,375,398,403,418,509,540,547,551,558,611,621,651,655,661,700,712,716,727,777,780,1006,1042,1046,1049,1071,1075,1098,1102,1105,1119],[140,141,142,143,147],"p",{},"The module watches the GraphQL operations you write and generates TypeScript types for them automatically, straight\nfrom your store's own schema.\nYou write a query as a plain string, and the variables going in, the data coming back, and every fragment in between\nare all typed for you.\nNo interfaces to write by hand, no ",[144,145,146],"code",{},"as"," casts, and no separate codegen command to run.",[149,150,156],"pre",{"className":151,"code":152,"filename":153,"language":154,"meta":155,"style":155},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineEventHandler(async () => {\n  const storefront = useStorefront()\n\n  const { data } = await storefront.request(`#graphql\n    query GetProduct($handle: String!) {\n      product(handle: $handle) {\n        id\n        title\n      }\n    }\n  `, {\n    variables: { handle: 'high-top-sneakers' }, \u002F\u002F required and typed\n  })\n\n  \u002F\u002F data.product is { id: string; title: string } | null\n  return data?.product\n})\n","~\u002Fserver\u002Fapi\u002Fexample.ts","ts","",[144,157,158,192,211,218,254,260,266,272,278,284,290,301,333,342,347,353,367],{"__ignoreMap":155},[159,160,163,167,170,174,178,182,186,189],"span",{"class":161,"line":162},"line",1,[159,164,166],{"class":165},"s7zQu","export",[159,168,169],{"class":165}," default",[159,171,173],{"class":172},"s2Zo4"," defineEventHandler",[159,175,177],{"class":176},"sTEyZ","(",[159,179,181],{"class":180},"spNyl","async",[159,183,185],{"class":184},"sMK4o"," ()",[159,187,188],{"class":180}," =>",[159,190,191],{"class":184}," {\n",[159,193,195,198,201,204,207],{"class":161,"line":194},2,[159,196,197],{"class":180},"  const",[159,199,200],{"class":176}," storefront",[159,202,203],{"class":184}," =",[159,205,206],{"class":172}," useStorefront",[159,208,210],{"class":209},"swJcz","()\n",[159,212,214],{"class":161,"line":213},3,[159,215,217],{"emptyLinePlaceholder":216},true,"\n",[159,219,221,223,226,229,232,234,237,239,242,245,247,250],{"class":161,"line":220},4,[159,222,197],{"class":180},[159,224,225],{"class":184}," {",[159,227,228],{"class":176}," data",[159,230,231],{"class":184}," }",[159,233,203],{"class":184},[159,235,236],{"class":165}," await",[159,238,200],{"class":176},[159,240,241],{"class":184},".",[159,243,244],{"class":172},"request",[159,246,177],{"class":209},[159,248,249],{"class":184},"`",[159,251,253],{"class":252},"sfazB","#graphql\n",[159,255,257],{"class":161,"line":256},5,[159,258,259],{"class":252},"    query GetProduct($handle: String!) {\n",[159,261,263],{"class":161,"line":262},6,[159,264,265],{"class":252},"      product(handle: $handle) {\n",[159,267,269],{"class":161,"line":268},7,[159,270,271],{"class":252},"        id\n",[159,273,275],{"class":161,"line":274},8,[159,276,277],{"class":252},"        title\n",[159,279,281],{"class":161,"line":280},9,[159,282,283],{"class":252},"      }\n",[159,285,287],{"class":161,"line":286},10,[159,288,289],{"class":252},"    }\n",[159,291,293,296,299],{"class":161,"line":292},11,[159,294,295],{"class":184},"  `",[159,297,298],{"class":184},",",[159,300,191],{"class":184},[159,302,304,307,310,312,315,317,320,323,326,329],{"class":161,"line":303},12,[159,305,306],{"class":209},"    variables",[159,308,309],{"class":184},":",[159,311,225],{"class":184},[159,313,314],{"class":209}," handle",[159,316,309],{"class":184},[159,318,319],{"class":184}," '",[159,321,322],{"class":252},"high-top-sneakers",[159,324,325],{"class":184},"'",[159,327,328],{"class":184}," },",[159,330,332],{"class":331},"sHwdD"," \u002F\u002F required and typed\n",[159,334,336,339],{"class":161,"line":335},13,[159,337,338],{"class":184},"  }",[159,340,341],{"class":209},")\n",[159,343,345],{"class":161,"line":344},14,[159,346,217],{"emptyLinePlaceholder":216},[159,348,350],{"class":161,"line":349},15,[159,351,352],{"class":331},"  \u002F\u002F data.product is { id: string; title: string } | null\n",[159,354,356,359,361,364],{"class":161,"line":355},16,[159,357,358],{"class":165},"  return",[159,360,228],{"class":176},[159,362,363],{"class":184},"?.",[159,365,366],{"class":176},"product\n",[159,368,370,373],{"class":161,"line":369},17,[159,371,372],{"class":184},"}",[159,374,341],{"class":176},[140,376,377,378,381,382,385,386,389,390,393,394,397],{},"None of that was typed by hand.\nThe compiler knows ",[144,379,380],{},"handle"," is a required ",[144,383,384],{},"String!",", and it knows ",[144,387,388],{},"data.product"," has an ",[144,391,392],{},"id"," and a ",[144,395,396],{},"title"," and nothing\nelse, because that is what the query defined.",[399,400,402],"h2",{"id":401},"how-it-works","How it works",[140,404,405,406,409,410,413,414,417],{},"For every client you configure, the module runs a small pipeline on ",[144,407,408],{},"nuxt prepare",", ",[144,411,412],{},"nuxt dev"," and ",[144,415,416],{},"nuxt build"," that\nre-runs whenever a file that contains GraphQL was changed.",[419,420,422,427,454,458,465,469,491,498],"steps",{"level":421},"4",[423,424,426],"h4",{"id":425},"introspect-the-schema","Introspect the schema",[140,428,429,430,433,434,437,438,445,446,449,450,453],{},"The module introspects your store's GraphQL API and writes a minified schema to\n",[144,431,432],{},".nuxt\u002Fshopify\u002Fschema\u002F\u003Cclient>.\u003CapiVersion>.schema.json",".\nThis is the source of truth for what the API can do. The API version is part of the filename, so bumping\n",[144,435,436],{},"apiVersion"," introspects again instead of reusing the previous version's schema.\nThe Storefront and Admin schemas come from your store (or ",[439,440,444],"a",{"href":441,"rel":442},"https:\u002F\u002Fmock.shop",[443],"nofollow","mock.shop"," when ",[144,447,448],{},"mock"," is enabled). The\nCustomer Account schema needs ",[144,451,452],{},"@shopify\u002Fhydrogen"," as Shopify does not offer unauthenticated introspection for it.",[423,455,457],{"id":456},"generate-the-base-types","Generate the base types",[140,459,460,461,464],{},"From that schema it generates ",[144,462,463],{},"\u003Cclient>.types.d.ts",", the full TypeScript picture of the API: every object, input, enum\nand scalar.",[423,466,468],{"id":467},"scan-the-operations","Scan the operations",[140,470,471,472,475,476,479,480,409,483,486,487,490],{},"Then it scans the files matched by the ",[144,473,474],{},"documents"," globs, picks out the operations, and writes\n",[144,477,478],{},"\u003Cclient>.operations.d.ts",".\nEvery query, mutation and fragment it finds gets its own precise type: ",[144,481,482],{},"GetProductQuery",[144,484,485],{},"GetProductQueryVariables",",\n",[144,488,489],{},"ProductFieldsFragment",", and so on.",[423,492,494,495],{"id":493},"wire-up-the-typed-request","Wire up the typed ",[144,496,497],{},"request()",[140,499,500,501,504,505,508],{},"The operations file registers each operation into the client's type map, keyed by the operation's own source text.\nSo when you call ",[144,502,503],{},"storefront.request()"," with a ",[144,506,507],{},"#graphql"," string, TypeScript looks the string up in the map and pulls\nout both the variables it needs and the data it returns.",[510,511,512,513,515,516,519,520,523,524,527,528,531,532,535,536,539],"note",{},"Because the source string is the key, the module can only type operations it can find and read statically.\nWrite them as a ",[144,514,507],{},"-prefixed template literal, a literal with a ",[144,517,518],{},"\u002F* GraphQL *\u002F"," comment in front, a ",[144,521,522],{},"gql"," or\n",[144,525,526],{},"graphql"," tagged template, or a standalone ",[144,529,530],{},".graphql","\u002F",[144,533,534],{},".gql"," file.\nSee the ",[439,537,538],{"href":27},"Editor Setup"," for more information.",[140,541,542,543,546],{},"During ",[144,544,545],{},"dev"," the types regenerate on every file change.\nSave a file that adds or changes an operation and the operations step re-runs, so the new query is typed a moment later, with no restart and nothing to run by hand.",[399,548,550],{"id":549},"what-gets-generated","What gets generated",[140,552,553,554,557],{},"Everything lands in your build directory (",[144,555,556],{},".nuxt","), which is throwaway and git-ignored, so there is nothing to commit\nand nothing to keep in sync by hand.\nDepending on which clients you set up, you get:",[559,560,562,574,584,593],"code-tree",{"default-value":561},".nuxt\u002Fshopify\u002Fstorefront\u002Fstorefront.operations.d.ts",[149,563,568],{"className":564,"code":565,"filename":566,"language":567,"meta":155,"style":155},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F The introspected Storefront schema as a source of truth for codegen.\n",".nuxt\u002Fshopify\u002Fschema\u002Fstorefront.\u003CapiVersion>.schema.json","json",[144,569,570],{"__ignoreMap":155},[159,571,572],{"class":161,"line":162},[159,573,565],{"class":331},[149,575,578],{"className":151,"code":576,"filename":577,"language":154,"meta":155,"style":155},"\u002F\u002F Base types for the whole Storefront API (objects, inputs, enums, scalars).\n",".nuxt\u002Fshopify\u002Fstorefront\u002Fstorefront.types.d.ts",[144,579,580],{"__ignoreMap":155},[159,581,582],{"class":161,"line":162},[159,583,576],{"class":331},[149,585,587],{"className":151,"code":586,"filename":561,"language":154,"meta":155,"style":155},"\u002F\u002F One precise type per query, mutation and fragment.\n",[144,588,589],{"__ignoreMap":155},[159,590,591],{"class":161,"line":162},[159,592,586],{"class":331},[149,594,599],{"className":595,"code":596,"filename":597,"language":598,"meta":155,"style":155},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F graphql-config for the IDE GraphQL language server.\n\u002F\u002F See the Editor Setup guide.\n",".nuxt\u002Fgraphql.config.mjs","js",[144,600,601,606],{"__ignoreMap":155},[159,602,603],{"class":161,"line":162},[159,604,605],{"class":331},"\u002F\u002F graphql-config for the IDE GraphQL language server.\n",[159,607,608],{"class":161,"line":194},[159,609,610],{"class":331},"\u002F\u002F See the Editor Setup guide.\n",[140,612,613,614,486,617,620],{},"Each client gets the same set of files under its own folder (",[144,615,616],{},".nuxt\u002Fshopify\u002Fcustomer-account",[144,618,619],{},".nuxt\u002Fshopify\u002Fadmin","), so a Storefront query is always checked against the Storefront schema, and an Admin query against\nthe Admin schema.",[140,622,623,624,627,628,631,632,409,635,409,638,641,642,646,647,241],{},"Operation and fragment types are available globally when ",[144,625,626],{},"codegen.autoImport"," is enabled (the default for\nthe storefront client). Everything, including the schema types, can also be imported from the\n",[144,629,630],{},"#shopify\u002F\u003Cclient>"," aliases (",[144,633,634],{},"#shopify\u002Fstorefront",[144,636,637],{},"#shopify\u002Fcustomer-account",[144,639,640],{},"#shopify\u002Fadmin",").\nSee ",[439,643,645],{"href":644},"\u002Fgetting-started\u002Fusage#generated-types","Generated Types"," and\n",[439,648,650],{"href":649},"\u002Fgetting-started\u002Fusage#auto-imports","Auto-Imports",[399,652,654],{"id":653},"routing-operations-to-the-right-api","Routing operations to the right API",[140,656,657,658,660],{},"Which client an operation belongs to comes down to where the file lives and what it's called, which is what each\nclient's ",[144,659,474],{}," globs match on.\nOut of the box:",[662,663,664,668,678],"ul",{},[665,666,667],"li",{},"Storefront is the default. Any GraphQL in your app counts as a Storefront operation unless it's scoped to one of the others.",[665,669,670,671,674,675,241],{},"Admin picks up files in an ",[144,672,673],{},"admin\u002F"," directory, or named ",[144,676,677],{},"*.admin.{ts,js,gql,graphql}",[665,679,680,681,409,684,687,688,674,691,409,694,687,697,241],{},"Customer Account picks up files in a ",[144,682,683],{},"customer-account\u002F",[144,685,686],{},"customer\u002F"," or ",[144,689,690],{},"account\u002F",[144,692,693],{},"*.customer-account.*",[144,695,696],{},"*.customer.*",[144,698,699],{},"*.account.*",[510,701,702,703,707,708,711],{},"This is the same convention the ",[439,704,706],{"href":705},"\u002Fgetting-started\u002Fusage#fragments","fragments"," use.\nKeeping shared documents under ",[144,709,710],{},"graphql\u002F\u003Cclient>\u002F"," in the project root keeps everything routed correctly.",[399,713,715],{"id":714},"configuration","Configuration",[140,717,718,719,722,723,726],{},"Codegen is configured per client, under ",[144,720,721],{},"shopify.clients.\u003Cclient>",".\nThe full list lives in the ",[439,724,725],{"href":44},"configuration reference",", but the options that matter most for\ncodegen are:",[728,729,730,739,751,762],"field-group",{},[731,732,734,735,738],"field",{"name":474,"type":733},"array","Glob patterns (relative to your project root) to scan for operations. Prefix a pattern with ",[144,736,737],{},"!"," to exclude it.\nWhen provided, these patterns replace the client's built-in defaults.",[731,740,743,744,747,748],{"name":741,"type":742},"codegen","object | boolean","Code generation for this client. Set to ",[144,745,746],{},"false"," to disable it entirely - default: ",[144,749,750],{},"true",[731,752,755,756,761],{"name":753,"type":754},"codegen.plugins.typescript","object","Override the underlying ",[439,757,760],{"href":758,"rel":759},"https:\u002F\u002Fthe-guild.dev\u002Fgraphql\u002Fcodegen\u002Fplugins\u002Ftypescript\u002Ftypescript",[443],"TypeScript plugin","\noptions, for example to customize scalar mappings.",[731,763,765,766,770,771,773,774,776],{"name":626,"type":764},"boolean","Declare this client's ",[767,768,769],"strong",{},"operation and fragment"," types globally, so they can be used without an import -\ndefault: ",[144,772,750],{}," for the storefront client, ",[144,775,746],{}," for the others.",[140,778,779],{},"For example, to scan a custom directory and map a custom scalar:",[149,781,784],{"className":151,"code":782,"filename":783,"language":154,"meta":155,"style":155},"export default defineNuxtConfig({\n  shopify: {\n    clients: {\n      storefront: {\n        apiVersion: '2026-04',\n        publicAccessToken: '...',\n\n        documents: [\n          'queries\u002F**\u002F*.ts', \u002F\u002F only scan this folder (replaces the defaults, relative to project root)\n          '!queries\u002Flegacy\u002F**', \u002F\u002F but ignore this one\n        ],\n\n        codegen: {\n          plugins: {\n            typescript: {\n              scalars: { Decimal: 'number' },\n            },\n          },\n        },\n      },\n    },\n  },\n})\n","nuxt.config.ts",[144,785,786,800,809,818,827,843,859,863,873,888,902,909,913,922,931,940,964,969,975,981,987,993,999],{"__ignoreMap":155},[159,787,788,790,792,795,797],{"class":161,"line":162},[159,789,166],{"class":165},[159,791,169],{"class":165},[159,793,794],{"class":172}," defineNuxtConfig",[159,796,177],{"class":176},[159,798,799],{"class":184},"{\n",[159,801,802,805,807],{"class":161,"line":194},[159,803,804],{"class":209},"  shopify",[159,806,309],{"class":184},[159,808,191],{"class":184},[159,810,811,814,816],{"class":161,"line":213},[159,812,813],{"class":209},"    clients",[159,815,309],{"class":184},[159,817,191],{"class":184},[159,819,820,823,825],{"class":161,"line":220},[159,821,822],{"class":209},"      storefront",[159,824,309],{"class":184},[159,826,191],{"class":184},[159,828,829,832,834,836,839,841],{"class":161,"line":256},[159,830,831],{"class":209},"        apiVersion",[159,833,309],{"class":184},[159,835,319],{"class":184},[159,837,838],{"class":252},"2026-04",[159,840,325],{"class":184},[159,842,486],{"class":184},[159,844,845,848,850,852,855,857],{"class":161,"line":262},[159,846,847],{"class":209},"        publicAccessToken",[159,849,309],{"class":184},[159,851,319],{"class":184},[159,853,854],{"class":252},"...",[159,856,325],{"class":184},[159,858,486],{"class":184},[159,860,861],{"class":161,"line":268},[159,862,217],{"emptyLinePlaceholder":216},[159,864,865,868,870],{"class":161,"line":274},[159,866,867],{"class":209},"        documents",[159,869,309],{"class":184},[159,871,872],{"class":176}," [\n",[159,874,875,878,881,883,885],{"class":161,"line":280},[159,876,877],{"class":184},"          '",[159,879,880],{"class":252},"queries\u002F**\u002F*.ts",[159,882,325],{"class":184},[159,884,298],{"class":184},[159,886,887],{"class":331}," \u002F\u002F only scan this folder (replaces the defaults, relative to project root)\n",[159,889,890,892,895,897,899],{"class":161,"line":286},[159,891,877],{"class":184},[159,893,894],{"class":252},"!queries\u002Flegacy\u002F**",[159,896,325],{"class":184},[159,898,298],{"class":184},[159,900,901],{"class":331}," \u002F\u002F but ignore this one\n",[159,903,904,907],{"class":161,"line":292},[159,905,906],{"class":176},"        ]",[159,908,486],{"class":184},[159,910,911],{"class":161,"line":303},[159,912,217],{"emptyLinePlaceholder":216},[159,914,915,918,920],{"class":161,"line":335},[159,916,917],{"class":209},"        codegen",[159,919,309],{"class":184},[159,921,191],{"class":184},[159,923,924,927,929],{"class":161,"line":344},[159,925,926],{"class":209},"          plugins",[159,928,309],{"class":184},[159,930,191],{"class":184},[159,932,933,936,938],{"class":161,"line":349},[159,934,935],{"class":209},"            typescript",[159,937,309],{"class":184},[159,939,191],{"class":184},[159,941,942,945,947,949,952,954,956,959,961],{"class":161,"line":355},[159,943,944],{"class":209},"              scalars",[159,946,309],{"class":184},[159,948,225],{"class":184},[159,950,951],{"class":209}," Decimal",[159,953,309],{"class":184},[159,955,319],{"class":184},[159,957,958],{"class":252},"number",[159,960,325],{"class":184},[159,962,963],{"class":184}," },\n",[159,965,966],{"class":161,"line":369},[159,967,968],{"class":184},"            },\n",[159,970,972],{"class":161,"line":971},18,[159,973,974],{"class":184},"          },\n",[159,976,978],{"class":161,"line":977},19,[159,979,980],{"class":184},"        },\n",[159,982,984],{"class":161,"line":983},20,[159,985,986],{"class":184},"      },\n",[159,988,990],{"class":161,"line":989},21,[159,991,992],{"class":184},"    },\n",[159,994,996],{"class":161,"line":995},22,[159,997,998],{"class":184},"  },\n",[159,1000,1002,1004],{"class":161,"line":1001},23,[159,1003,372],{"class":184},[159,1005,341],{"class":176},[510,1007,1008,1009,1012,1013,409,1016,409,1019,409,1022,409,1025,486,1028,409,1031,409,1034,1037,1038,1041],{},"Shopify's custom scalars are mapped to ",[144,1010,1011],{},"string"," by default (",[144,1014,1015],{},"DateTime",[144,1017,1018],{},"Decimal",[144,1020,1021],{},"HTML",[144,1023,1024],{},"URL",[144,1026,1027],{},"Color",[144,1029,1030],{},"UnsignedInt64",[144,1032,1033],{},"ISO8601DateTime",[144,1035,1036],{},"JSON","), unknown scalars fall back to ",[144,1039,1040],{},"unknown",", and enums are generated as string\nunion types.",[399,1043,1045],{"id":1044},"good-to-know","Good to know",[140,1047,1048],{},"A few things fall out of generating types off a live schema:",[662,1050,1051,1059,1062],{},[665,1052,1053,1054,1056,1057,241],{},"The first build needs credentials and a network connection. Introspection actually talks to Shopify (or ",[144,1055,444],{},"), so the first time types are generated you need a valid token and a reachable API. The Customer Account schema is bundled with ",[144,1058,452],{},[665,1060,1061],{},"Only operations written out statically get typed. If you build a query string dynamically at runtime there is nothing for the module to match against, so it falls back to a generic response. Write operations as literals and it keeps the types.",[665,1063,1064,1065,1067,1068,1070],{},"A brand new operation is only typed once codegen has run. In ",[144,1066,545],{}," that happens on its own and near-instantly thanks to the file watcher. In CI, ",[144,1069,408],{}," generates everything before typechecking.",[399,1072,1074],{"id":1073},"advanced-customizing-generation","Advanced: customizing generation",[140,1076,1077,1078,409,1081,646,1084,1087,1088,1093,1094,1097],{},"Each step also exposes a hook (",[144,1079,1080],{},"\u003Cclient>:generate:introspection",[144,1082,1083],{},"\u003Cclient>:generate:types",[144,1085,1086],{},"\u003Cclient>:generate:operations",").\nEach one hands you the ",[439,1089,1092],{"href":1090,"rel":1091},"https:\u002F\u002Fthe-guild.dev\u002Fgraphql\u002Fcodegen",[443],"GraphQL Code Generator"," config right before it runs, so\nif you need full control you can add plugins, change the preset, or adjust the document list.\nThe ",[439,1095,1096],{"href":116},"Hooks reference"," has the full list and their signatures.",[399,1099,1101],{"id":1100},"acknowledgements","Acknowledgements",[140,1103,1104],{},"We would like to thank the authors of the following libraries for making this possible:",[662,1106,1107,1112],{},[665,1108,1109],{},[439,1110,1092],{"href":1090,"rel":1111},[443],[665,1113,1114],{},[439,1115,1118],{"href":1116,"rel":1117},"https:\u002F\u002Fgithub.com\u002FShopify\u002Fshopify-app-js\u002Ftree\u002Fmain\u002Fpackages\u002Fapi-clients\u002Fapi-codegen-preset",[443],"Shopify Codegen Preset",[1120,1121,1122],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":155,"searchDepth":194,"depth":194,"links":1124},[1125,1126,1127,1128,1129,1130,1131],{"id":401,"depth":194,"text":402},{"id":549,"depth":194,"text":550},{"id":653,"depth":194,"text":654},{"id":714,"depth":194,"text":715},{"id":1044,"depth":194,"text":1045},{"id":1073,"depth":194,"text":1074},{"id":1100,"depth":194,"text":1101},"Automatically typed queries and mutations for your Nuxt Shopify project","md",null,{},{"icon":123},{"title":120,"description":1132},"bWTMEWqtKgXlE2TgRk-kizm4ZMXH27jeplXUuMrqkWg",[1140,1142],{"title":115,"path":116,"stem":117,"description":1141,"icon":118,"children":-1},"Hooks for the Nuxt Shopify module",{"title":125,"path":126,"stem":127,"description":1143,"icon":128,"children":-1},"Exploring the Shopify APIs from your Nuxt dev server",1788560607177]