Skip to content

Commit 22b7dc1

Browse files
committed
chore: update README.md
Signed-off-by: Frederik Bußmann <frederik@bussmann.io>
1 parent adf9378 commit 22b7dc1

1 file changed

Lines changed: 50 additions & 0 deletions

File tree

README.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,34 @@ Note that `useStorefrontData` automatically extracts the `data` property from th
181181
stringify.
182182
When using it together with the setting `errors: { throw: false }` you will need to check for errors manually within the response instead of using the `error` object returned by the `useStorefrontData` composable.
183183

184+
### Access Customer Account API on the client side
185+
186+
First check out the [Customer Account API documentation](https://shopify.nuxtjs.org/essentials/customer-account) to set up dependencies and add credentials.
187+
188+
Then you can access the Customer Account API on the client side with the `useCustomerAccount` composable:
189+
190+
```html
191+
<!-- ~/pages/your-page.vue -->
192+
193+
<script setup lang="ts">
194+
const customerAccount = useCustomerAccount()
195+
196+
const { data } = await customerAccount.request(`#graphql
197+
query {
198+
customer {
199+
id
200+
firstName
201+
lastName
202+
}
203+
}
204+
`)
205+
</script>
206+
207+
<template>
208+
<pre>{{ data?.customer }}</pre>
209+
</template>
210+
```
211+
184212
### Access APIs via Nitro endpoints
185213

186214
The module exposes utilities to access each API via Nitro endpoints.
@@ -235,6 +263,28 @@ const { data } = await useFetch("/api/products")
235263
The `data` variable will be typed as `Ref<ClientResponse<FetchProductsQuery>>`, which enables autocompletion and full
236264
type checking.
237265

266+
#### Customer Account API example
267+
268+
You can use the `useCustomerAccount` utility to access the customer account API in a nitro event handler:
269+
270+
```ts
271+
// ~/server/api/customer.ts
272+
273+
export default defineEventHandler(async () => {
274+
const customerAccount = useCustomerAccount()
275+
276+
return await customerAccount.request(`#graphql
277+
query {
278+
customer {
279+
id
280+
firstName
281+
lastName
282+
}
283+
}
284+
`)
285+
})
286+
```
287+
238288
#### Admin API example
239289

240290
Files ending with `.admin.ts` or `.admin.gql` will automatically be processed for the admin API.

0 commit comments

Comments
 (0)