Failed to load schema - fetch failed

[Mnigos]

Environment

---

• Operating System: Darwin
• Node Version: v18.12.0
• Nuxt Version: 3.0.0
• Nitro Version: 1.0.0
• Package Manager: [email protected]
• Builder: vite
• User Config: modules, css, build, graphql-client, vite
• Runtime Modules: @pinia/[email protected], [email protected], [email protected]
• Build Modules: -

---

Describe the bug

Cannot introspect graphql api. Everything works in playground. I tried to introspect graphql api with insomnia and everything works fine.

Expected behaviour

Should introspect graphql api as intended.

Reproduction

No response

Additional context

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@pinia/nuxt', 'nuxt-windicss', 'nuxt-graphql-client'],
  css: [
    'vuetify/lib/styles/main.sass',
    '@mdi/font/css/materialdesignicons.css',
  ],
  build: {
    transpile: ['vuetify'],
  },
  'graphql-client': {
    clients: {
      default: {
        host: `${process.env.NUXT_API_STRAPI_URL}/graphql`,
        token: {
          name: 'Authorization',
          type: 'Bearer',
          value: process.env.NUXT_API_STRAPI_TOKEN,
        },
      },
    },
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})

Graphql config in strapi

 graphql: {
    config: {
      endpoint: '/graphql',
      shadowCRUD: true,
      playgroundAlways: true,
      depthLimit: 7,
      amountLimit: 100,
      apolloServer: {
        introspection: true,
      },
    },
  },

Logs

ERROR  Cannot start nuxt:                                                                 13:38:36
        Failed to load schema from http:https://localhost:1337/graphql:

        fetch failed to http:https://localhost:1337/graphql
        TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11118:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async UrlLoader.load (file:https:///Users/igormakowski/Documents/Projects/biuro-makowska-new/node_modules/@graphql-tools/url-loader/esm/index.js:207:29)                                       13:38:31
    at async file:https:///Users/igormakowski/Documents/Projects/biuro-makowska-new/node_modules/@graphql-tools/load/esm/load-typedefs/load-file.js:14:39
    at async Promise.all (index 5)
    at async loadFile (file:https:///Users/igormakowski/Documents/Projects/biuro-makowska-new/node_modules/@graphql-tools/load/esm/load-typedefs/load-file.js:12:9)
    at async file:https:///Users/igormakowski/Documents/Projects/biuro-makowska-new/node_modules/@graphql-tools/load/esm/load-typedefs/collect-sources.js:201: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 http:https://localhost:1337/graphql:
  
  fetch failed to http:https://localhost:1337/graphql
  TypeError: fetch failed
  at Object.fetch (node:internal/deps/undici/undici:11118:11)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async UrlLoader.load (node_modules/@graphql-tools/url-loader/esm/index.js:207:29)
  at async node_modules/@graphql-tools/load/esm/load-typedefs/load-file.js:14:39
  at async Promise.all (index 5)
  at async loadFile (node_modules/@graphql-tools/load/esm/load-typedefs/load-file.js:12:9)
  at async node_modules/@graphql-tools/load/esm/load-typedefs/collect-sources.js:201:25

[Diizzayy]

@Mnigos Thank you for raising this issue, It's not immediately clear what the issue here might be, but I'll replicate your setup locally with Strapi and have a closer look to see what I found.

Will be sure to keep you updated accordingly.

[Mnigos]

It works with production deployment on railway, but not with local.

[dalton5]

same for me. I also try to connect to strapi graphql

[vignesk70]

I am having a similar issue when i launch graphql using Docker and docker compose. If i launch this directly outside of docker i am able to run the nuxt app and connect to the port 4000 without an issue.

ERROR Cannot start nuxt:
nuxt_dev | Failed to load schema from http:https://neo4j:4000:
nuxt_dev |
nuxt_dev | connect ECONNREFUSED 192.168.0.2:4000
nuxt_dev | Error: connect ECONNREFUSED 192.168.0.2:4000
nuxt_dev | at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)
nuxt_dev |
nuxt_dev | GraphQL Code Generator supports:
nuxt_dev | - ES Modules and CommonJS exports (export as default or named export "schema")
nuxt_dev | - Introspection JSON File
nuxt_dev | - URL of GraphQL endpoint
nuxt_dev | - Multiple files with type definitions (glob expression)
nuxt_dev | - String in config file
nuxt_dev |
nuxt_dev | Try to use one of above options and run codegen again.
nuxt_dev |

[marfalkov]

@Mnigos

It works with production deployment on railway, but not with local.

That might be a CORS issue

This SO answer might help

[smoothlikejazz]

I just ran into this, found an article that mentioned to change, and this package was able to load the schema

GQL_HOST=http:https://localhost:3000/graphql -> caused error
GQL_HOST=http:https://127.0.0.1:3000/graphql -> schema loaded

no changes in strapi left cors the same strapi version 4.14.4

'strapi::cors',

Ref -> https://stackoverflow.com/a/75092333

[stlbucket]

when i try to use codegen, i get an error like this:

Cannot start nuxt:                                                                                   10:35:41 AM
        Failed to load schema from http:https://localhost:3000/api/graphql:

        Unexpected response: "<!DOCTYPE html><html><head><title>Starting Nuxt... | Nuxt</title><meta charset=\"utf-8\"><meta content=\"width=device-width,initial-scale=1,minimum-scale=1\" name=\"viewport\"><style>.nuxt-loader-bar{background:repeating-linear-gradient(to right, #36E4DA 0%, #1DE0B1 25%, #00DC82 50%, #1DE0B1 75%, #36E4DA 100%);height:100px;background-size:200% auto;background-position:0 0;animation:gradient 2s infinite;animation-fill-mode:forwards;animation-timing-function:linear;position

it seems to be attempting to inspect before my server is even loaded

i am using postgraphile, which needs to inspect the db on startup, so maybe that is the issue?

or maybe it is something else, as others seem to have this issue.