Strapi 4 and NuxtJS: Unable to connect via GraphQL (ECONNREFUSED)

Question

I am building a small blog application using NuxtJS, Strapi 4 (and GraphQL) and apollo. To do that, i followed this tutorial: https://www.youtube.com/watch?v=yDkoV-8krcA

The problem is for some reason NuxtJS is unable to connect to Strapi. I get the following error message: Network error: request to https://localhost:1337/graphql failed, reason: connect ECONNREFUSED ::1:1337

Strapi is runnung, the GraphQL PlugIn is activated and via Firefox and Chromium i am able to use the built in playground.

nuxt.config.js

  modules: [
    '@nuxt/content',
    '@nuxtjs/apollo'
  ],
  apollo: {  
    clientConfigs: {
      default: {
        httpEndpoint: process.env.BACKEND_URL || "https://localhost:1337/graphql"
      }
    }
  },

strapi.vue (which should display the content)

<template>
  <main>
    <div class="container content single-page">
      <h1>StrapiTest</h1>
      {{ $data }}
    </div>
  </main>
</template>

<script>
import { articleQuery } from '~/graphql/query'
export default {
  data() {
    return {
      articles: []
    }
  },
  apollo: {
    articles: {
      prefetch: true,
      query: articleQuery
    }
  }
}
</script>

and the articleQuery (in /graphql/query.js):

import gql from 'graphql-tag'

export const articleQuery = gql`
    query articleQuery {
        articles {
            data {
                id
                attributes {
                title
                content
                }
            }
        }
    }          
`

Where is the mistake?

process.env.BACKEND_URL is properly configured and the server has been restarted? — Mar 23, 2022 at 15:38
process.env.BACKEND_URL should not play a role here, as I run both applications locally in development status. Even without the process.env.BACKEND_URL, i.e. only with httpEndpoint: "https://localhost:1337/graphql" it does not work. — Mar 23, 2022 at 15:52
I do have the same error. But it works fine if I access the api on my browser directly — May 7, 2022 at 12:00
So weird, I changed my internet source it worked instantly. urrg what an unnecessary stress. — May 7, 2022 at 12:03

AndersAnders 311 bronze badge · Accepted Answer · 2023-10-11 11:18:35Z

I was able to get my tooling to work with my graphql endpoint by substituting localhost with 127.0.0.1 thanks to the answers of the related post below. Maybe that’s your solution.

GraphQL Code Generator – Failed to load schema from https://localhost:8000/graphql – Request with GET/HEAD method cannot have body

ricardo aguiarricardo aguiar 236 bronze badges · Accepted Answer · 2022-05-13 16:40:11Z

I had the same error, but It works on local with these settings:

  modules: ['@nuxt/http', '@nuxtjs/apollo'],

  https: {
    baseURL: `${strapiBaseUri}/api`,
    browserBaseURL: `${strapiBaseUri}/api`
  },

  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: "https://localhost:1337/graphql"
      }
    }
  },

Strapi 4 and NuxtJS: Unable to connect via GraphQL (ECONNREFUSED)