Fetch Failed error - Failed to load schema

[giuseppe-hex]

Hey,

Some context:

• I'm able to get the starlink demo working
• The query I'm trying to use works within postman and graphql-playground
• The API is a local laravel app running in docker
• Using Nuxt 3.0.0-rc.6
• I've tried explicitly declaring the schema path and that hasn't helped
• This works with the production url

I get the following error when running yarn dev:

nuxt-config.ts

...
  runtimeConfig: {
    public: {
      GQL_HOST: 'http://localhost/graphql',
      GQL_TOKEN_NAME: 'my_token_here'
    }
  },

  modules: ['@nuxtjs/tailwindcss', 'nuxt-graphql-client'],
...

data.gql (provided by b/e dev)

mutation acme_User() {
    getUser(id: 1) {
        first_name
        last_name
        created_at
    }
}

Let me know if there is anything else I can provide you with. Appreciate any help :)

[Diizzayy]

Apologies for the delayed reply here, have you checked to ensure that your api allows GraphQL introspection?

[John-Church]

Hello,

I'm running into similar problem. I'm using Laravel Lighthouse for my graphql api. It does allow introspection and introspection works in Apollo Studio. I get the same error log as above. Let me know if I can provide other details but my setup looks about the same as the one above.

Should I just provide a local generated schema via the client schema option?

[Mnigos]

I got same issue. What's the solution?

[PierreCavalet]

sorry for the late response, running into the same issue.

The problem is that there is no way to provide a Browser URL for a specific client (correct me if I'm wrong @Diizzayy)

Since you are using docker, your graphql API endpoint for your nuxt container (on SSR) is something like

http://yourservice:xxxx/graphql

but for your browser (assuming you are port forwarding) its

http://localhost:xxxx/graphql

One way to fix this would be to use the same URL using /etc/hosts or you it seems that changing the host dynamically works.

export default defineNuxtPlugin(async () => {
  if (process.client) {
    const runtimeConfig = useRuntimeConfig();
    useGqlHost(runtimeConfig.public.clientGqlHost);
  }
});

using a runtime variable like this in your nuxt config:

runtimeConfig: {
    public: {
      GQL_HOST: 'http://yourservice:xxxx/graphql',
      clientGqlHost: 'http://localhost:xxxx/graphql'
    },
  },

Hope it helps