Comments (12)
That would be awesome @Diizzayy !
Thank you for the example and the explanation. In the upcoming days I will be releasing a video tutorial about Building Headless Commerce with Nuxt 3, Shopify and Tailwind, and I decided to use your module as it provides the best Developer Experience :)
Basically:
<script setup lang="ts">
const { data } = await useAsyncData('products', () => GqlProducts({ first: 3 }))
</script>
<template>
<div>
<HeroBanner />
<ProductList :products="data.products.edges"/>
</div>
</template>
I will let you know when the video will be released! :)
from nuxt-graphql-client.
Looking at this issue, I suppose it does (like it cannot fetch the graphql json from shopify on the frontend due to lack of the token).
useAsyncData probably tries to fetch the same data on the frontend but fails due to not having the auth correctly served. I will take a look at it and let you know :)
from nuxt-graphql-client.
For now I will leave it as it is as I cannot find any workaround.
BTW, do you have any example of triggering mutation on the client side? Like adding product to cart by clicking a button on the product page?
In the docs I was only able to see examples of useAsyncData with queries
from nuxt-graphql-client.
@Baroshem I love that you're delving into creating video tutorial, those will definitely be a great help to many newcomers in the Nuxt community.
I'm looking forward to checking out the video when it's released 😁
it provides the best Developer Experience :)
I'm glad to hear that you're liking it, it's going to get even better from here.
from nuxt-graphql-client.
Does your Shopify api require authentication?
I'm not certain but I suspect this may be an authentication issue, when interacting with a GraphQL API that requires authentication, by default tokens passed via config are only applied on server side to prevent the token being leaked client side.
from nuxt-graphql-client.
@Baroshem I'm interested to hear your findings. If our suspicions are correct you can have a look at retaining config level tokens to aid in debugging this issue
from nuxt-graphql-client.
Hey, it seems like I have to retain the token for client side data fetching. Do you know any approach that I could do to somehow force client side fetch through some kind of server middleware to not retain the token?
Basically what is happening that on client side navigation, the request to graphql.json is being triggered but because the token is applied only on the server side, this navigigation is failing with 403
from nuxt-graphql-client.
In the docs I was only able to see examples of useAsyncData with queries
I need to update the documentation with clearer examples for different use cases.
BTW, do you have any example of triggering mutation on the client side?
This can be achieved as explained below.
- Given the following
Nuxt-app/queries/user.gql
mutation addUser($input: UserInput!) {
addUser(input: $input) {
uid
role
name
email
picture
}
}
query getUsers {
users {
uid
role
name
email
picture
}
}
- Usage
<script lang="ts" setup>
// Everything here ( gql functions, their inputs and return types ) should be fully typed
async function addUser() {
const { addUser } = await GqlAddUser({
input: {
name: 'John Doe',
email: '[email protected]'
}
})
// additonal logic
}
async function getUsers() {
const { users } = await GqlGetUsers()
return users
}
</script>
ps: the properties returned by gql functions are named based on the GraphQL operation name
from nuxt-graphql-client.
For now I will leave it as it is as I cannot find any workaround.
@Baroshem I'll look into a way to circumvent this case for instances where the GraphQL query should only be made in a secured environment (server side) to prevent private token usage.
As this use case isn't limited to this module, it would be good if we provide a first class workaround using the capabilities that Nuxt 3 offers
from nuxt-graphql-client.
Btw, I have this issue on a local dev server, productions is statically generated and seems working well if I query data only in setup.
from nuxt-graphql-client.
@iBobik Have you attempted enabling the retainToken
flag?
from nuxt-graphql-client.
@Diizzayy I does not want to expose this token to the frontend, I want to enforce SSR for this calls.
from nuxt-graphql-client.
Related Issues (20)
- Enhanced codegen config add maybeValue option
- useAsyncGql is not defined HOT 2
- Comparison with @nuxtjs/apollo@next HOT 1
- useGqlToken is not defined HOT 2
- Nuxt generate issues
- batch HTTP link
- Unknown scalar types HOT 1
- Version 0.32.2 causes nuxt prepare to fail HOT 5
- Error while requiring module HOT 1
- Allow type safe usage of useGqlError HOT 4
- Self-signed certificate error
- "Cannot find module 'graphql-request' or its corresponding type declarations" when using with pnpm HOT 3
- JS error at index.ts 36:8 browser-ponyfill.js HOT 6
- How to override *.gql and *.graphql files from Nuxt Layer?
- add timeout feature HOT 1
- Allow the host and clientHost to be changed at runtime HOT 2
- `graphql-client` not found in runtimeConfig when deploied nuxt3 to fly.io.
- Method fired at accessToken expired like `useGqlTokenExpired` or is using useGqlToken in middleware a good solution?
- On Windows HMR stopped working in version 0.2.34
- Support the schema.graphql auto generated by nest.js in codeFirst mode.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nuxt-graphql-client.