diizzayy / nuxt-graphql-client Goto Github PK

Hello,
I'm trying to use wordpress with wp-graphql and I need to post some mutations from my nuxt front-end.
I'm using wp-grapql-cors to login and there is indeed a Set-Cookie in the response headers.
Using Postman, I can see the cookie and with authorization tab set to "inherit from parent", if I post a mutation to create a page for example, it works.
But within nuxt, I dont know how to configure "nuxt-grapql-client" in order to have something equivalent !
Any help or example, is welcome !
Thank you.
PS: Here is a working generated example code from postman using axios:

var axios = require('axios');
var data = JSON.stringify({
  query: `mutation createPost {
  createPost(input: {
    title: "A nice title"
    content: "some content",
    status: PUBLISH
    }) {
    clientMutationId
  }
}`,
  variables: {}
});

var config = {
  method: 'post',
  url: 'https://galpon.test/graphql',
  headers: { 
    'Content-Type': 'application/json', 
    'Cookie': 'wordpress_logged_in_0a80706747350ab2bd151dfb3be09ba4=test2%7C1654774457%7CaUXw73nZkYwr1uxZkZwjcRkYPYPkONqJgDqd2jRTP8c%7C04441e5096ef211a79ba62f83e5cf34e1c9cfeffeb9c1933877f6231dc71d0de'
  },
  data : data
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});

Hi
I'm trying to connect with my Keystone JS app.
I need to use a mutation to make a login and get the user's token.
This is login.gql:

type Mutation {
authenticateUserWithPassword(email: String!, password: String!): UserAuthenticationWithPasswordResult!
}

type Query {
authenticatedItem: AuthenticatedItem
}

union AuthenticatedItem = User

union UserAuthenticationWithPasswordResult = UserAuthenticationWithPasswordSuccess | UserAuthenticationWithPasswordFailure

type UserAuthenticationWithPasswordSuccess {
sessionToken: String!
item: User!
}

type UserAuthenticationWithPasswordFailure {
message: String!
}

mutation {
authenticateUserWithPassword(
email: "[email protected]",
password: "1234567890"
) {
... on UserAuthenticationWithPasswordSuccess {
item {
id
name
email
}
}
... on UserAuthenticationWithPasswordFailure {
message
}
}
}

I get those error when I run npm run dev:
Unknown type "UserAuthenticationWithPasswordSuccess"
Unknown type "UserAuthenticationWithPasswordFailure"

Do I doing something wrong?
Thanks

When using this with DatoCMS I get this error:

ERROR 16:09:12 [vite] Internal server error: Transform failed with 8 errors: 16:09:12
/Users/wordie/Documents/00 Projects/000 Portfolio/nuxt3-app/.nuxt/gql-sdk.ts:1550:2: ERROR: The symbol "CreatedAtAsc" has already been declared
/Users/wordie/Documents/00 Projects/000 Portfolio/nuxt3-app/.nuxt/gql-sdk.ts:1551:2: ERROR: The symbol "CreatedAtDesc" has already been declared
/Users/wordie/Documents/00 Projects/000 Portfolio/nuxt3-app/.nuxt/gql-sdk.ts:1560:2: ERROR: The symbol "UpdatedAtAsc" has already been declared
/Users/wordie/Documents/00 Projects/000 Portfolio/nuxt3-app/.nuxt/gql-sdk.ts:1561:2: ERROR: The symbol "UpdatedAtDesc" has already been declared
/Users/wordie/Documents/00 Projects/000 Portfolio/nuxt3-app/.nuxt/gql-sdk.ts:2072:2: ERROR: The symbol "CreatedAtAsc" has already been declared
...
Plugin: vite:esbuild
File: /Users/wordie/Documents/00 Projects/000 Portfolio/nuxt3-app/.nuxt/gql-sdk.ts

The symbol "CreatedAtAsc" has already been declared
1548| UpdatedAtAsc = '_updatedAt_ASC',
1549| UpdatedAtDesc = '_updatedAt_DESC',
1550| CreatedAtAsc = 'createdAt_ASC',
| ^
1551| CreatedAtDesc = 'createdAt_DESC',
1552| DateAsc = 'date_ASC',

The symbol "CreatedAtDesc" has already been declared
1549| UpdatedAtDesc = '_updatedAt_DESC',
1550| CreatedAtAsc = 'createdAt_ASC',
1551| CreatedAtDesc = 'createdAt_DESC',
| ^
1552| DateAsc = 'date_ASC',
1553| DateDesc = 'date_DESC',

The symbol "UpdatedAtAsc" has already been declared
1558| TitleAsc = 'title_ASC',
1559| TitleDesc = 'title_DESC',
1560| UpdatedAtAsc = 'updatedAt_ASC',
| ^
1561| UpdatedAtDesc = 'updatedAt_DESC'
1562| }

The symbol "UpdatedAtDesc" has already been declared
1559| TitleDesc = 'title_DESC',
1560| UpdatedAtAsc = 'updatedAt_ASC',
1561| UpdatedAtDesc = 'updatedAt_DESC'
| ^
1562| }
1563|

The symbol "CreatedAtAsc" has already been declared
2070| AutoplayKeyVidAsc = 'autoplayKeyVid_ASC',
2071| AutoplayKeyVidDesc = 'autoplayKeyVid_DESC',
2072| CreatedAtAsc = 'createdAt_ASC',
| ^
2073| CreatedAtDesc = 'createdAt_DESC',
2074| DateAsc = 'date_ASC',

The symbol "CreatedAtDesc" has already been declared
2071| AutoplayKeyVidDesc = 'autoplayKeyVid_DESC',
2072| CreatedAtAsc = 'createdAt_ASC',
2073| CreatedAtDesc = 'createdAt_DESC',
| ^
2074| DateAsc = 'date_ASC',
2075| DateDesc = 'date_DESC',

The symbol "UpdatedAtAsc" has already been declared
2088| TypeofworkAsc = 'typeofwork_ASC',
2089| TypeofworkDesc = 'typeofwork_DESC',
2090| UpdatedAtAsc = 'updatedAt_ASC',
| ^
2091| UpdatedAtDesc = 'updatedAt_DESC'
2092| }

The symbol "UpdatedAtDesc" has already been declared
2089| TypeofworkDesc = 'typeofwork_DESC',
2090| UpdatedAtAsc = 'updatedAt_ASC',
2091| UpdatedAtDesc = 'updatedAt_DESC'
| ^
2092| }
2093| `

I assume it is related to this issue

Is it possible to fix this? Happy to provide more details

Opening the example found here, https://nuxt-graphql-client.web.app/#nuxt-graphql-client, doesn't work – fails to load schema.

There is a problem with the latest Nuxt: 3.0.0-27490192.4253d2e

[nitro] [dev] [unhandledRejection] TypeError: Cannot read properties of undefined (reading 'setHeader')

Line in code:

Is there a fix for the following?

ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time 09:07:50
(Use node --trace-warnings ... to show where the warning was created)

The example below would result in nuxt context being lost

<script lang="ts" setup>
const { data, error } = await useAsyncData(async () => {
  const { profile } = await GqlProfile()

  return GqlPosts({ author:  profile.id })
});

if (error.value) {
  console.error(error.value)
}
</script>

I just found the project here and read #3. Now I have the following question/feature request:

Will the implementation of an access token and a refresh token setup be supported in the future? E.g. if an error message "token expired" comes back, you automatically call a defined query to generate a new access token with its refresh token (HTTP cookie) and then the original query is automatically executed again.

With pnpm after pnpm build and then pnpm preview crashes with strange errors. With yarn everything works fine.

• Operating System: Linux
• Node Version: v18.1.0
• Nuxt Version: 3.0.0-rc.3
• Package Manager: [email protected]
• Builder: vite
• User Config: runtimeConfig, css, modules, vueuse, schemaOrg, unocss, experimental
• Runtime Modules: @vueuse/[email protected], @unocss/[email protected], [email protected], [email protected]
• Build Modules: -

[nuxt] [request error] require() of ES Module /home/ririen/Projekty/Project/Website/.output/server/node_modules/node-fetch/src/index.js from /home/ririen/Projekty/Project/Website/.output/server/node_modules/cross-fetch/dist/node-ponyfill.js not supported.
Instead change the require of index.js in /home/ririen/Project/Project/Website/.output/server/node_modules/cross-fetch/dist/node-ponyfill.js to a dynamic import() which is available in all CommonJS modules.
  at Object.<anonymous> (./server/node_modules/cross-fetch/dist/node-ponyfill.js:1:19)  
  at Object.<anonymous> (./server/node_modules/graphql-request/dist/index.js:84:34)  
  at async Promise.all (index 0)  
  at async ./server/chunks/handlers/renderer.mjs:11064:24  
  at async ./server/chunks/handlers/renderer.mjs:11120:64  
  at async ./server/node_modules/h3/dist/index.mjs:417:19  
  at async Server.nodeHandler (./server/node_modules/h3/dist/index.mjs:367:7)

Can u make this library support graphql subscriptions?
https://www.apollographql.com/docs/react/data/subscriptions/

Hello, I would like to know if there is a possibility to include other parameters in the headers through the client configuration, for cases where custom headers are needed to read the API schema.

Thanks in advance!

Originally posted by @douglasgusson in #87 (comment)

Hello, @Diizzayy, thanks for the answer.

My application is multitenancy. So, when I make a request, is needed to put an special header to specify what tenant I want to download the API schema. So, I would be greatfull if you allow to put it on requests. If you preffer, I can make a PR.

Originally posted by @douglasgusson in #87 (comment)

I have this issue on my personal project using nuxt-graphql-client.
So I tried to see if I also had this error on the nuxt-graphql-client-demo project and the answer is yes

Issue:

When running npm run dev throw an error:

ERROR (node:53064) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time 18:31:51
(Use node --trace-warnings ... to show where the warning was created)

ERROR (node:53064) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time 18:31:52

ERROR Cannot start nuxt: Something went wrong Unable to load template plugin matching typescript for "gql-sdk.ts" 18:31:52
Unable to load template plugin matching 'typescript'.
Reason:
Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'b:'

Unable to load template plugin matching 'typescript'.
Reason:
Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid URLs. Received protocol 'b:'

at executeCodegen (/B:/nuxt-graphql-client-demo-main/node_modules/@graphql-codegen/cli/index.mjs:1051:28)
at async generate (/B:/nuxt-graphql-client-demo-main/node_modules/@graphql-codegen/cli/index.mjs:1361:25)
at async generate (/B:/nuxt-graphql-client-demo-main/node_modules/nuxt-graphql-client/dist/module.mjs:9:25)
at async generateGqlTypes (/B:/nuxt-graphql-client-demo-main/node_modules/nuxt-graphql-client/dist/module.mjs:206:22)
at async setup (/B:/nuxt-graphql-client-demo-main/node_modules/nuxt-graphql-client/dist/module.mjs:262:5)
at async Object.normalizedModule (/B:/nuxt-graphql-client-demo-main/node_modules/@nuxt/kit/dist/index.mjs:565:5)
at async installModule (/B:/nuxt-graphql-client-demo-main/node_modules/@nuxt/kit/dist/index.mjs:380:3)
at async initNuxt (/B:/nuxt-graphql-client-demo-main/node_modules/nuxt3/dist/chunks/index.mjs:1100:7)
at async load (/B:/nuxt-graphql-client-demo-main/node_modules/nuxi/dist/chunks/dev.mjs:6749:9)
at async Object.invoke (/B:/nuxt-graphql-client-demo-main/node_modules/nuxi/dist/chunks/dev.mjs:6790:5)

Error: Unable to load template plugin matching typescript
at getPluginByName (/B:/nuxt-graphql-client-demo-main/node_modules/@graphql-codegen/cli/index.mjs:248:23)
at async Promise.all (index 0)
at async /B:/nuxt-graphql-client-demo-main/node_modules/@graphql-codegen/cli/index.mjs:968:60
at async /B:/nuxt-graphql-client-demo-main/node_modules/@graphql-codegen/cli/index.mjs:816:21

To reproduce:

Clone the Diizzayy /
nuxt-graphql-client-demo project
npm i
npm run dev

My config:

• windows 10
• node v17.0.0
• Nuxt CLI v3.0.0-27458584.91fd16a

Hi,

On 1.1.5 and Nuxt3 RC6 getting this error. Easy repro on your Stackblitz
https://stackblitz.com/edit/nuxt-graphql-bmkppb?file=package.json

Thank you

[Vue warn]: Unhandled error during execution of setup function 
  at <App>
[h3] [unhandled] H3Error: useState is not defined
    at createError (file:///home/projects/nuxt-graphql-bmkppb/node_modules/h3/dist/index.mjs:249:15)
    at Server.nodeHandler (file:///home/projects/nuxt-graphql-bmkppb/node_modules/h3/dist/index.mjs:439:21) {
  statusCode: 500,
  fatal: false,
  unhandled: true,
  statusMessage: 'Internal Server Error'
}
[nuxt] [request error] useState is not defined
  at createError (./node_modules/h3/dist/index.mjs:249:15)  
  at Server.nodeHandler (./node_modules/h3/dist/index.mjs:439:21)
[Vue warn]: Unhandled error during execution of setup function 
  at <App>
[h3] [unhandled] H3Error: useState is not defined
    at createError (file:///home/projects/nuxt-graphql-bmkppb/node_modules/h3/dist/index.mjs:249:15)
    at Server.nodeHandler (file:///home/projects/nuxt-graphql-bmkppb/node_modules/h3/dist/index.mjs:439:21) {
  statusCode: 500,
  fatal: false,
  unhandled: true,
  statusMessage: 'Internal Server Error'
}
[nuxt] [request error] useState is not defined
  at createError (./node_modules/h3/dist/index.mjs:249:15)  
  at Server.nodeHandler (./node_modules/h3/dist/index.mjs:439:21)```

Trying to figure out how to pass params to the queries.

Use case;
Generate dynamic routes by passing the page slug or id to a single item query.

Based on your example, how could I pass the $limit property to queries/starlink.gql?

Hello, i have to change the value of the variable limit to 5, but i dont know why the displayed result is always 10.

I would like to ask if is a way to change the amount of displayed resullt from 10 to 5.

<template>
  <div>
    <h2>Starlink Launches</h2>
    <p>Limit: {{limit}}</p>
    <button @click="limit = 5">change limit to 5</button>

    <p v-for="(entry, i) of data?.launches" :key="entry.id">
  {{ i + 1 }}. Mission Name: {{ entry.mission_name }} ({{
    entry.launch_year
  }})
    </p>
  </div>
</template>

<script lang="ts" setup>
const limit = ref(10)

const { data } = await useAsyncData('starlink', () => GqlLaunches({limit: limit.value}))
</script>

repo: https://github.com/serggiocaramello/nuxt-graphql-client-test

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass', 'mdi/css/materialdesignicons.min.css'],
  build: {
    transpile: ['vuetify', 'chart.js'],
  },
  meta: {...},
  publicRuntimeConfig: {
    lastfmApiKey: process.env.LASTFM_API_KEY,
    apiUrl: process.env.API_URL,
    GQL_HOST: `${process.env.API_URL}/graphql`,
  },
  buildModules: ['@pinia/nuxt'],
  modules: ['nuxt-graphql-client'],
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
  // https://github.com/nuxt/bridge/issues/50
  hooks: {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    'vite:extendConfig'(clientConfig: any, { isClient }: any) {
      if (isClient) {
        clientConfig.build.rollupOptions.output.manualChunks = {
          'vue-chartjs': ['vue-chartjs'],
        }
      }
    },
  },
})

dependencies

"nuxt-graphql-client": "^0.0.33",
"nuxt": "3.0.0-rc.3",

full nuxt build output

$ nuxt build
Nuxt CLI v3.0.0-rc.6                                                                        13:21:47

 ERROR  (node:36204) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)


 ERROR  'getSdk' is not exported by .nuxt/gql-sdk.ts, imported by node_modules/nuxt-graphql-client/dist/runtime/composables/index.mjs
file: /node_modules/nuxt-graphql-client/dist/runtime/composables/index.mjs:4:9
2: import { GraphQLClient } from "graphql-request";
3: import { deepmerge } from "../utils.mjs";
4: import { getSdk as gqlSdk } from "#build/gql-sdk";
            ^
5: import { ref, useNuxtApp, useRuntimeConfig, useRequestHeaders } from "#imports";
6: const DEFAULT_STATE = { proxyCookies: true };


 ERROR  'getSdk' is not exported by .nuxt/gql-sdk.ts, imported by node_modules/nuxt-graphql-client/dist/runtime/composables/index.mjs

  at error (node_modules/rollup/dist/shared/rollup.js:198:30)
  at Module.error (node_modules/rollup/dist/shared/rollup.js:12542:16)
  at Module.traceVariable (node_modules/rollup/dist/shared/rollup.js:12901:29)
  at ModuleScope.findVariable (node_modules/rollup/dist/shared/rollup.js:11553:39)
  at ReturnValueScope.findVariable (node_modules/rollup/dist/shared/rollup.js:6486:38)
  at ChildScope.findVariable (node_modules/rollup/dist/shared/rollup.js:6486:38)
  at Identifier.bind (node_modules/rollup/dist/shared/rollup.js:7553:40)
  at CallExpression.bind (node_modules/rollup/dist/shared/rollup.js:5383:23)
  at CallExpression.bind (node_modules/rollup/dist/shared/rollup.js:9049:15)
  at VariableDeclarator.bind (node_modules/rollup/dist/shared/rollup.js:5383:23)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Hi there

I just saw that the demo with the SpaceX API is failing under: https://stackblitz.com/github/diizzayy/nuxt-graphql-client-demo

I got the same error in local with the exact same setup.

Hello,
This is not a bug but a question:
Within composable/states.js I'm trying to use one state in another (need current saison in order to fetch current season spectacles). But I get an error (500 Nuxt instance unavailable) as soon as I use one export in another.
I've done a test with basic fetch here to check if it is possible and indeed it is and works (https://stackblitz.com/edit/nuxt-starter-uxypem?file=composables/states.js)

export const useUser = async () => {
  const data = await $fetch('https://jsonplaceholder.typicode.com/users/');
  return data[2].id;
};

export const useArticles = async () => {
  let userId = await useUser();
  const data = await $fetch(
    `https://jsonplaceholder.typicode.com/posts?userId=${userId}`
  );
  return data;
};

Here is the not working code

export const useSiteOptions = async () => {
  const { data } = await useAsyncData("siteOptions", () => GqlSiteOptions());
  let options = data.value.siteOptions.acfOptions;
  return options;
};

export const useSpectacles = async () => {
  // NOT WORKING, WHY ?
  const siteOptions = await useSiteOptions();
  let season = siteOptions.currentSeason.slug;
  console.log(season) // logs correctly '21-22'

  const { data: specs } = await useAsyncData("spectacles", () =>
    GqlSpectaclesBySeason({ terms: season })
  );

  // WORKING IF ABOVE IS COMMENTED
  //   const { data: specs } = await useAsyncData("spectacles", () =>
  //     GqlSpectaclesBySeason({ terms: "21-22" })
  //   );

  return specs.value.spectacles.nodes;
};

Here is the full error displayed in the console:

[Vue warn]: Unhandled error during execution of setup function 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/" >
[nuxt] [request error] nuxt instance unavailable
  at Module.useNuxtApp (./.nuxt/dist/server/server.mjs:447:13)  
  at Module.useAsyncData (./.nuxt/dist/server/server.mjs:826:38)  
  at Module.useSpectacles (./.nuxt/dist/server/server.mjs:11050:55)  
  at processTicksAndRejections (node:internal/process/task_queues:96:5)  
  at async setup (./.nuxt/dist/server/server.mjs:14208:12)

Any help is welcome, thank you.

It would be nice if we could disable code generation. Is there any option in the configuration to do that?

Thanks.

GraphQL Codegen has some more config options of which I'd like to use some with this nuxt module: https://www.graphql-code-generator.com/docs/config-reference/codegen-config#configuration-options

Specifically disabling document validation

Context: A subdomain of a Wordpress multisite we have has a staging site.

Wp Engine has a bug where it doesnt have proper SSL for deep nested subdomains

A staging site of a subdomain is a subdomain of a subdomain and wpengine doesnt support that well yet.

This leads to graphql not working because it doesnt trust ssl

I need to at the moment use http instead of https.

How to fix it? How to set something like ssl : false?

I have a custom module that extends pages via the nuxt.hook('pages:extend') hook and would like to do a gql query to get extra routes from the server. How can I use this module at build time in a custom module?

After following the readme I weren't able to start nuxt:

ERROR  Cannot start nuxt:  The requested module '@nuxt/kit' does not provide an export named 'addAutoImport'                                                              12:58:23

  import { useLogger, defineNuxtModule, createResolver, addTemplate, addAutoImport, resolveFiles } from '@nuxt/kit';

My nuxt-installation is based on this template:

antfu/vitesse-nuxt3

Currently we can only add a single host into the GQL client, when working in closed network environments ( e.g. Docker ) we need to be able to link to http://nginx:80/api as the internal container name, once the application is up and running however we need a clientHost as other applications ran will not be able to connect to the internal IP address but would required something like http://localhost:8004/api

My suggestion would be, if clientHost is not set and only host is being used, that it will use the host option for both SSR and client requests as a fallback.

Hi,

I just tested the preview on Stackblitz and the graphql package is missing. I get the following error:

ERROR Cannot start nuxt: Cannot find package 'graphql' imported from /home/projects/kkvizxqln.github/node_modules/@graphql-codegen/cli/index.mjs

I was able to solve the problem with npm i graphl in the terminal but I hope you can fix this problem so that we don't have to do it manually.

Thanks for this new module. Keep going on !

Uncaught (in promise) TypeError: Cannot destructure property 'clients' of '(intermediate value)' as it is undefined.
    at getClient (composables.mjs:75:11)
    at useGqlClient (composables.mjs:91:12)
    at useGql (composables.mjs:128:21)

Seems like the nuxt team changed how the runtimeConfig works so nuxt-graphql-client is throwing an error as it doesn't find the endpoint.

https://v3.nuxtjs.org/migration/runtime-config/#runtime-config

I'm working on a headless Craft CMS site and need to send api requests with a dynamically generated query parameter to get live previews of content. Is it possible to send query parameters along with the GraphQL request?

How can I disable code generation from the api schema on build stage?
The production backend does not allow me to parse the schema

Hello!

I've been experimenting with nuxt3 and directus using your module to call the graphql endpoint.
I have set up the .env like so:

GQL_HOST="http://localhost:8055/graphql"
GQL_TOKEN="MY_TOKEN"

I then created my request files and asyncData fetching like in the docs:

// pages/posts/index.vue

const { data } = await useAsyncData('posts', () => GqlPosts())

This works great!

However, when doing the same thing inside a dynamic route page, it seems like the access token is no longer used. I get an error 400. Adding useGqlToken('MY_TOKEN') resolves this but I guess it is not intended.

// pages/posts/[slug].vue

useGqlToken('MY_TOKEN')
const { data } = await useAsyncData('post-' + UID, () => GqlUniquePost({
  slug: route.params.slug,
  }))

Am I doing something wrong? Thanks a lot!

After recent Nuxt updates, GQL functions with dynamic route stopped working for me.

I created a reproduction that takes the limit parameter from useRoute().fullPath and switching between pages returns the data as null.

CodeSandbox does not return an error in the console for some reason.

The GQL function seems to be executing before useRoute() is executed

I'm not sure if I made a good reproduction, but locally the project just stopped working returning undefined when I add anything from route to the GQL parameter.

Reproduction:
https://codesandbox.io/s/naughty-cherry-yyoelj

Nuxt crashes when:

• an empty GraphQL Document is added while the dev server is running.
• the only GraphQL Document(s) present are empty when yarn dev or yarn build is ran.

Start a fresh project, if you have nuxt-graphql-client installed and have no Graphql files in your queries you will get a build error

'getSdk' is not exported by .nuxt/gql-sdk.ts, imported by node_modules/nuxt-graphql-client/dist/runtime/composables/index.mjs

Hi @Diizzayy !

I encountered a strange issue when working with your module (which is great BTW)

Everything works great when accessing the page from URL, but when I am doing a page transition (i.e. from Homepage to Product Page) I am getting a 403 on graphql.json. I am using the example with Shopify.

Have you encountered something like this already?

Hello,

This error happens every time Nuxt starts (with yarn run dev).

ERROR (node:22713) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
(Use node --trace-warnings ... to show where the warning was created)

Node v16.14.2

Allow this module to be used with nuxt-bridge by providing a plugin.

I get this error when trying to run the bundled nuxt app
[nuxt] [request error] Cannot find module '[mypath]\Frontend\.output\server\node_modules\graphql\language\parser' imported from [mypath]\Frontend\.output\server\chunks\server.mjsDid you mean to import graphql/language/parser.js? at new NodeError (node:internal/errors:372:5) at finalizeResolution (node:internal/modules/esm/resolve:437:11) at moduleResolve (node:internal/modules/esm/resolve:1009:10) at defaultResolve (node:internal/modules/esm/resolve:1218:11) at ESMLoader.resolve (node:internal/modules/esm/loader:580:30) at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18) at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40) at link (node:internal/modules/esm/module_job:78:36)
I did follow the Quick start guide, yarn dev works fine the preview throws the error above

Hi

although types are automatically imported
it's not clear how to reference result types

in other words, I would like to explicitly use result type in child component props

<script setup lang="ts">
defineProps<{
  launch: ....
}>()
</script>

I am trying to do call for data from my CMS with the same Token in two different places, a component(Header) and a NuxtPage(Body). One page load, both useAsyncData calls work and the page works as expected. However, if I change the NuxtPage with a NuxtLink, and hence need to fetch new data for that page, I get a '401 Unauthorized' Error from my CMS (datoCMS). I am using the refreshnuxtdata to do that data refresh and it seems like that function is not sending the token?

This seems like the most relevant code but let me know if you need more information

const { data } = await useAsyncData("allworkGet", () => GqlLaunches());
const refresh = () => refreshNuxtData('allworkGet')

Things I tried

Didn't Work, even though GQL_TOKEN is in .env

function refreshFunc(){
    const config = useRuntimeConfig();
    console.log('URL:',config.GQL_HOST);
    // logs the URL
    console.log('URL:',config.GQL_TOKEN);
    // logs undefined
    useGqlToken(config.GQL_TOKEN);
    refreshNuxtData('allworkGet');
}

const refresh = () => refreshFunc()

Did work but seems to be a bad solution to have to add my token by hand

function refreshFunc(){

    useGqlToken('my_tokens_string');
    refreshNuxtData('allworkGet');
}

hi im experiencing this error

steps to reproduce:
follow the quick start guide from the documentation

"nuxt-graphql-client": "0.0.28",
"graphql": "^16.5.0",
"nuxt": "3.0.0-rc.3"

Hello dear developers,

I've managed to create a strapi/graphql/heroku backend that seems to be working fine to me in development mode and also on the local build. But when trying to deploy the Nuxt3/TS app to Netlify or DigitalOcean I've been getting this error. I guess it's probably server-related.

Any hints would be really appreciated. :)
And thanks for your work !

11:21:29 PM: ────────────────────────────────────────────────────────────────
11:21:29 PM:   1. Build command from Netlify app                             
11:21:29 PM: ────────────────────────────────────────────────────────────────
11:21:29 PM: ​
11:21:29 PM: $ yarn build
11:21:29 PM: yarn run v1.22.10
11:21:29 PM: $ nuxi build
11:21:29 PM: [log] Nuxt CLI v3.0.0-rc.1
11:21:35 PM: [error] Something went wrong Failed to load schema for "gql-sdk.ts"
11:21:35 PM:         Failed to load schema from https://catorcentena-graphql.herokuapp.com/graphql:
11:21:35 PM:         Unexpected token P in JSON at position 0
11:21:35 PM:         SyntaxError: Unexpected token P in JSON at position 0
11:21:35 PM:     at JSON.parse (<anonymous>)
11:21:35 PM:     at file:///opt/build/repo/node_modules/@graphql-tools/url-loader/index.mjs:502:37
11:21:35 PM:     at processTicksAndRejections (node:internal/process/task_queues:96:5)
11:21:35 PM:     at async UrlLoader.load (file:///opt/build/repo/node_modules/@graphql-tools/url-loader/index.mjs:776:29)
11:21:35 PM:     at async file:///opt/build/repo/node_modules/@graphql-tools/load/index.mjs:50:39
11:21:35 PM:     at async Promise.all (index 5)
11:21:35 PM:     at async loadFile (file:///opt/build/repo/node_modules/@graphql-tools/load/index.mjs:48:9)
11:21:35 PM:     at async file:///opt/build/repo/node_modules/@graphql-tools/load/index.mjs:361:25
11:21:35 PM:         GraphQL Code Generator supports:
11:21:35 PM:           - ES Modules and CommonJS exports (export as default or named export "schema")
11:21:35 PM:           - Introspection JSON File
11:21:35 PM:           - URL of GraphQL endpoint
11:21:35 PM:           - Multiple files with type definitions (glob expression)
11:21:35 PM:           - String in config file
11:21:35 PM:         Try to use one of above options and run codegen again.
11:21:35 PM:   Failed to load schema from https://catorcentena-graphql.herokuapp.com/graphql:
11:21:35 PM:   Unexpected token P in JSON at position 0
11:21:35 PM:   SyntaxError: Unexpected token P in JSON at position 0
11:21:35 PM:   at JSON.parse (<anonymous>)
11:21:35 PM:   at node_modules/@graphql-tools/url-loader/index.mjs:502:37
11:21:35 PM:   at processTicksAndRejections (node:internal/process/task_queues:96:5)
11:21:35 PM:   at async UrlLoader.load (node_modules/@graphql-tools/url-loader/index.mjs:776:29)
11:21:35 PM:   at async node_modules/@graphql-tools/load/index.mjs:50:39
11:21:35 PM:   at async Promise.all (index 5)
11:21:35 PM:   at async loadFile (node_modules/@graphql-tools/load/index.mjs:48:9)
11:21:35 PM:   at async node_modules/@graphql-tools/load/index.mjs:361:25
11:21:35 PM:   GraphQL Code Generator supports:
11:21:35 PM:   - ES Modules and CommonJS exports (export as default or named export "schema")
11:21:35 PM:   - Introspection JSON File
11:21:35 PM:   - URL of GraphQL endpoint
11:21:35 PM:   - Multiple files with type definitions (glob expression)
11:21:35 PM:   - String in config file
11:21:35 PM:   Try to use one of above options and run codegen again.
11:21:35 PM:   at executeCodegen (node_modules/@graphql-codegen/cli/index.mjs:1051:28)
11:21:35 PM:   at processTicksAndRejections (node:internal/process/task_queues:96:5)
11:21:35 PM:   at async generate (node_modules/@graphql-codegen/cli/index.mjs:1361:25)
11:21:35 PM:   at async generate (node_modules/nuxt-graphql-client/dist/module.mjs:57:10)
11:21:35 PM:   at async generateGqlTypes (node_modules/nuxt-graphql-client/dist/module.mjs:277:22)
11:21:35 PM:   at async setup (node_modules/nuxt-graphql-client/dist/module.mjs:340:5)
11:21:35 PM:   at async Object.normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:577:5)
11:21:35 PM:   at async installModule (node_modules/@nuxt/kit/dist/index.mjs:392:3)
11:21:35 PM:   at async initNuxt (node_modules/nuxt/dist/index.mjs:1362:7)
11:21:35 PM:   at async loadNuxt (node_modules/nuxt/dist/index.mjs:1384:5)
11:21:35 PM:   Error: Failed to load schema
11:21:35 PM:   at loadSchema (node_modules/@graphql-codegen/cli/index.mjs:400:15)
11:21:35 PM:   at processTicksAndRejections (node:internal/process/task_queues:96:5)
11:21:35 PM:   at async node_modules/@graphql-codegen/cli/index.mjs:930:65
11:21:35 PM:   at async node_modules/@graphql-codegen/cli/index.mjs:929:52
11:21:35 PM:   at async node_modules/@graphql-codegen/cli/index.mjs:816:21
11:21:35 PM: error Command failed with exit code 1. (https://ntl.fyi/exit-code-1)
11:21:35 PM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

GqlContext clientOps values are duplicated when prepareOperations is triggered after initial generation.

Hey guys,

I am playing around with Nuxt3 and Shopify and started testing out your library. Unfortunately it seems, that it doesn't work with the Shopify Storefront API. Is this because the Shopify Storefront API is not able to give back the types?

I have created a repo here:
https://stackblitz.com/edit/github-pkuqo9-f28qfe?file=nuxt.config.ts

Here is the error I get:

 ERROR  Cannot restart nuxt:  Something went wrong Failed to load schema for "gql-sdk.ts"                                                                     11:50:38
        Failed to load schema from https://palavin.myshopify.com/api/unstable/graphql.json:

        Could not obtain introspection result, received: undefined
        Error: Could not obtain introspection result, received: undefined
    at getSchemaFromIntrospection (file:///home/projects/github-pkuqo9-f28qfe/node_modules/@graphql-tools/wrap/index.mjs:1798:11)
    at eval (file:///home/projects/github-pkuqo9-f28qfe/node_modules/@graphql-tools/wrap/index.mjs:1813:32)
    at async UrlLoader.load (file:///home/projects/github-pkuqo9-f28qfe/node_modules/@graphql-tools/url-loader/index.mjs:792:29)
    at async eval (file:///home/projects/github-pkuqo9-f28qfe/node_modules/@graphql-tools/load/index.mjs:73:39)
    at async Promise.all (index 5)
    at async loadFile (file:///home/projects/github-pkuqo9-f28qfe/node_modules/@graphql-tools/load/index.mjs:71:9)
    at async eval (file:///home/projects/github-pkuqo9-f28qfe/node_modules/@graphql-tools/load/index.mjs:384:25)
    
        GraphQL Code Generator supports:
          - ES Modules and CommonJS exports (export as default or named export "schema")
          - Introspection JSON File
          - URL of GraphQL endpoint
          - Multiple files with type definitions (glob expression)
          - String in config file
    
        Try to use one of above options and run codegen again.
    
      

  Failed to load schema from https://palavin.myshopify.com/api/unstable/graphql.json:
  
  Could not obtain introspection result, received: undefined
  Error: Could not obtain introspection result, received: undefined
  at getSchemaFromIntrospection (node_modules/@graphql-tools/wrap/index.mjs:1798:11)
  at eval (node_modules/@graphql-tools/wrap/index.mjs:1813:32)
  at async UrlLoader.load (node_modules/@graphql-tools/url-loader/index.mjs:792:29)
  at async eval (node_modules/@graphql-tools/load/index.mjs:73:39)
  at async Promise.all (index 5)
  at async loadFile (node_modules/@graphql-tools/load/index.mjs:71:9)
  at async eval (node_modules/@graphql-tools/load/index.mjs:384:25)
  
  GraphQL Code Generator supports:
  - ES Modules and CommonJS exports (export as default or named export "schema")
  - Introspection JSON File
  - URL of GraphQL endpoint
  - Multiple files with type definitions (glob expression)
  - String in config file
  
  Try to use one of above options and run codegen again.
  
  
  at executeCodegen (node_modules/@graphql-codegen/cli/index.mjs:1083:28)
  at async Module.generate (node_modules/@graphql-codegen/cli/index.mjs:1393:25)
  at async generate (node_modules/nuxt-graphql-client/dist/module.mjs:62:10)
  at async generateGqlTypes (node_modules/nuxt-graphql-client/dist/module.mjs:273:22)
  at async setup (node_modules/nuxt-graphql-client/dist/module.mjs:336:5)
  at async Object.normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:642:5)
  at async Module.installModule (node_modules/@nuxt/kit/dist/index.mjs:457:3)
  at async initNuxt (node_modules/nuxt/dist/index.mjs:1372:7)
  at async load (node_modules/nuxi/dist/chunks/dev.mjs:6749:9)
  at async _applyPromised (node_modules/nuxi/dist/chunks/dev.mjs:6701:10)
  
  Error: Failed to load schema
  at loadSchema (node_modules/@graphql-codegen/cli/index.mjs:432:15)
  at async eval (node_modules/@graphql-codegen/cli/index.mjs:962:65)
  at async eval (node_modules/@graphql-codegen/cli/index.mjs:961:52)
  at async eval (node_modules/@graphql-codegen/cli/index.mjs:848:21)

Thanks so much for looking into that.

The Token ist definetly working.

Best regards
Chris

After updating to 0.1.2 i'm seeing the following issue:

[nuxt] [request error] defineNuxtPlugin is not defined
  at $id_LuRQqTbFkB (./.nuxt/dist/server/server.mjs:44990:1)  
  at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:46246:3)

Downgrading back to 0.1.1 resolves this issue

Using Nuxt 3 RC.6

Urql has an easy way to add bearer tokens. I wonder if you're going to add to the project?

My production GQL API doesn't have introspection enabled so I would guess that the module wouldn't be able to generate schema for it. I do have a stage API that does have introspection enabled though.

Would it make sense to be able to specify a different endpoint for generation and different endpoint to actually use for making queries? That would be one way to fix that problem, I guess.

Disclaimer: I'm not currently using this module (or event Nuxt 3) so this is just something I'm filing in case I would potentially want to use it in the future.

I haven't used the module (disclaimer) but I've read the documentation and I though that if I'd use the module, I would probably prefer all generated APIs to be exposed under single object. For example $gql.launches.

Did you think about doing it that way? Would there be disadvantages to that (like tree shaking)?

Thanks a lot for so usefull product. Could you please provide any example with mutation ?