Diizzayy/nuxt-graphql-client

Error calling Gql Functions created by nuxt-graphql-client

Closed this issue · 1 comments

Environment

OS: macos
Node: v18.20.2
Nuxt: 3.13.2
nuxt-graphql-client: 0.2.36
Package Manager: yarn 1.22.22
Runtime Modules: "@apollo/server", "@as-integrations/h3", "@prisma/client", "bcrypt", "graphql", "graphql-scalars", "graphql-ws", "ioredis", "jsonwebtoken", "nanoid", "nexus", "nodemailer", "nookies", "nuxt", "nuxt-graphql-client", "nuxt-graphql-server", "uuid", "vue", "vue-router", "yup"

Describe the bug

When using the Gql Functions created by nuxt-graphql-client, the error below is being displayed

500
Error

at createError (./node_modules/nuxt/dist/app/composables/error.js:43:43)
at Module.showError (./node_modules/nuxt/dist/app/composables/error.js:16:21)
at ./node_modules/nuxt/dist/app/components/nuxt-root.js:57:70
at fn (./node_modules/nuxt/dist/app/nuxt.js:228:44)
at Object.callAsync (./node_modules/unctx/dist/index.mjs:68:55)
at ./node_modules/nuxt/dist/app/nuxt.js:231:56
at Object.runWithContext (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3940:18)
at callWithNuxt (./node_modules/nuxt/dist/app/nuxt.js:231:24)
at Object.runWithContext (./node_modules/nuxt/dist/app/nuxt.js:45:14)

my nuxt settings

export default defineNuxtConfig({
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },
  modules: ["nuxt-graphql-server", "nuxt-graphql-client"],
  graphqlServer: {
    schema: "generated/schema.graphql",
    url: "/api/graphql",
  },
  runtimeConfig: {
    public: {
      "graphql-client": {
        clients: {
          default: "./generated/schema.graphql",
        },
      },
    },
  },
  "graphql-client": {
    codegen: {
      avoidOptionals: true,
    },
  },
});

In this project I am exposing a graphql server, generating the schema with nexus graphql, the server part is functional, the generation of Gql Functions is being done, but when used the error reported above occurs.

Example of using the generated Gql functions

<script setup lang="ts">
const data = await GqlPing();
</script>

<template>
  <div>Template</div>
  <div>{{ data }}</div>
</template>

Example query

query Ping {
  ping
}

Expected behaviour

Reproduction

No response

Additional context

Logs

-

I adjusted the nuxt settings and was able to use it correctly.

runtimeConfig: {
    public: {
      "graphql-client": {
        clients: {
          default: {
            host: "http://localhost:3000/api/graphql",
            schema: "./generated/schema.graphql",
          },
        },
      },
    },
  },