Skip to content

Commit 0e80911

Browse files
committed
chore: Updated README.md
Signed-off-by: Frederik Bußmann <[email protected]>
1 parent d6c599c commit 0e80911

1 file changed

Lines changed: 40 additions & 0 deletions

File tree

README.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ Hot-reloaded auto-generated typescript types from GraphQL operations for easy ac
2323
![nuxt-shopify-demo](https://raw.githubusercontent.com/konkonam/nuxt-shopify/refs/heads/main/docs/public/demo.gif)
2424

2525
- Plug & play Shopify integration
26+
- Server & client side
2627
- Fully typed GraphQL operations with hot-reloading
2728
- Nuxt 3 & 4 ready
2829
- Storefront and Admin API support
@@ -93,6 +94,45 @@ The module exposes utilities to access each API via Nitro endpoints.
9394
#### Storefront API example
9495
9596
You can use the `useStorefront` utility to access the storefront API:
97+
The Storefront API can be used on the client and on the server.
98+
99+
##### Client
100+
101+
> [!NOTE]
102+
> To access the `useStorefront` composable on the client side, make sure you have
103+
> set the option `clients > storefront > client` to `true`
104+
105+
```html
106+
// ~/components/Products.vue
107+
108+
<script type="setup" setup lang="ts">
109+
const storefront = useStorefront()
110+
111+
const { data } = await storefront.request(`#graphql
112+
query FetchProducts($first: Int) {
113+
products(first: $first) {
114+
nodes {
115+
id
116+
title
117+
description
118+
}
119+
}
120+
}
121+
`, {
122+
variables: {
123+
first: 3,
124+
},
125+
})
126+
</script>
127+
128+
<template>
129+
<div>
130+
<pre>{{ data?.products }}</pre>
131+
</div>
132+
</template>
133+
```
134+
135+
##### Server
96136

97137
```typescript
98138
// ~/server/api/products.ts

0 commit comments

Comments
 (0)