Skip to content

Commit 4c8fdb8

Browse files
committed
chore(docs): update documentation
Signed-off-by: Frederik Bußmann <frederik@bussmann.io>
1 parent 938bcba commit 4c8fdb8

4 files changed

Lines changed: 112 additions & 1 deletion

File tree

docs/content/1.getting-started/4.usage.md

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -304,6 +304,48 @@ export default defineEventHandler(async (event) => {
304304
})
305305
```
306306

307+
## Outside of Nuxt
308+
309+
The composables above resolve their configuration from the runtime config, so they only work inside a Nuxt app.
310+
For Node scripts that run outside the Nuxt runtime the module also exports the
311+
client factories directly:
312+
313+
```ts [scripts/export-products.ts]
314+
import { createAdminClient } from '@nuxtjs/shopify'
315+
316+
const admin = createAdminClient({
317+
name: 'quickstart-abcd1234',
318+
clients: {
319+
admin: {
320+
clientId: process.env.SHOPIFY_CLIENT_ID!,
321+
clientSecret: process.env.SHOPIFY_CLIENT_SECRET!,
322+
},
323+
},
324+
})
325+
326+
const { data } = await admin.request(`#graphql
327+
query GetProducts {
328+
products(first: 10) {
329+
nodes {
330+
id
331+
title
332+
}
333+
}
334+
}
335+
`)
336+
337+
console.log(flattenConnection(data?.products))
338+
```
339+
340+
`createStorefrontClient`, `createCustomerAccountClient` and `createShopifyClient` are exported the same way.
341+
Access tokens are resolved exactly as they are inside Nuxt, so an admin client configured with a client ID and
342+
secret performs the OAuth token exchange for you.
343+
344+
::warning
345+
These factories are meant for Node-side code. Inside your app, keep using the auto-imported composables - they
346+
wire up proxying, caching, tracking and the Nuxt hooks that the bare factories do not.
347+
::
348+
307349
## Fragments
308350

309351
When using the Shopify GraphQL APIs, it's common to reuse fragments across multiple queries and mutations.
@@ -549,3 +591,45 @@ export default defineNuxtConfig({
549591
::note
550592
See the [module configuration reference](/essentials/configuration).
551593
::
594+
595+
## Utilities
596+
597+
Alongside the clients, the module auto-imports a few helpers for working with Shopify responses.
598+
They are available on both the client and the server.
599+
600+
### flattenConnection
601+
602+
Shopify returns paginated data as a connection with `edges` and `nodes`. `flattenConnection` turns either shape
603+
into a plain array, so you do not have to map over `edges` yourself:
604+
605+
```vue [app/pages/products.vue]
606+
<script setup lang="ts">
607+
const { data } = await useStorefrontData('products', `#graphql
608+
query GetProducts {
609+
products(first: 10) {
610+
nodes {
611+
id
612+
title
613+
}
614+
}
615+
}
616+
`)
617+
618+
const products = computed(() => flattenConnection(data.value?.products))
619+
</script>
620+
```
621+
622+
It returns an empty array when the connection is `null` or `undefined`, so the result is always safe to iterate.
623+
624+
### parseGid
625+
626+
Shopify identifies every record with a global ID such as `gid://shopify/Product/1234567890`.
627+
`parseGid` extracts the numeric ID from it, which is useful for URLs, analytics payloads, or third-party systems:
628+
629+
```ts
630+
const id = parseGid('gid://shopify/Product/1234567890') // '1234567890'
631+
```
632+
633+
::warning
634+
`parseGid` throws when the value is not a valid global ID. Guard the call if the ID may be missing or user-supplied.
635+
::

docs/content/2.essentials/2.configuration.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,10 @@ Configure one or more API clients:
230230
Client ID for customer account API requests
231231
:::
232232

233+
:::field{name="apiUrl" type="string"}
234+
Customer Account API endpoint. Resolved automatically at build time, set this to override.
235+
:::
236+
233237
:::field{name="clientSecret" type="string"}
234238
Client secret for confidential clients. When set, the OAuth token exchange is authenticated with the secret instead of PKCE - server-side only, optional
235239
:::

docs/content/2.essentials/4.customer-account.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,22 @@ export default defineEventHandler(async (event) => {
122122
})
123123
```
124124

125+
To end a session from your own code use the auto-imported `clearCustomerAccountSession` helper.
126+
It clears the session cookie and removes stored tokens when an external `tokenStorage` is configured:
127+
128+
```ts [~/server/api/sign-out.ts]
129+
export default defineEventHandler(async (event) => {
130+
await clearCustomerAccountSession(event)
131+
132+
return { ok: true }
133+
})
134+
```
135+
136+
::note
137+
This only clears the local session. To also sign the customer out of Shopify, send them to the configured
138+
`logoutURL` instead, which performs the OpenID Connect logout.
139+
::
140+
125141
Once the user is authenticated, you can use the `useCustomerAccount` and `useCustomerAccountData` composables
126142
to fetch customer data from the Customer Account API.
127143

docs/content/2.essentials/7.caching.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,9 +203,16 @@ Proxy caching is persistent and done on the server side.
203203
:::
204204
::
205205

206+
::warning
207+
The proxy cache is shared by every visitor. The cache key is derived from the query, the variables and the cache
208+
tier only. Never assign a proxy cache tier to personalized queries (carts, customer data, buyer-specific pricing),
209+
or one visitor's response will be served to another. The client cache is per browser session and is not affected
210+
by this.
211+
::
212+
206213
::warning
207214
Known limitations:
208-
* Nitro will currently deliver stale requests even if `staleMaxAge` has been reached: [issue](https://github.com/nitrojs/nitro/issues/2164).
215+
* In Nitro v2, stale requests may be delivered even if `staleMaxAge` has been reached: [issue](https://github.com/nitrojs/nitro/issues/2164).
209216
::
210217

211218
### Server Side

0 commit comments

Comments
 (0)