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 http://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 || "http://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?

Answer 1

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

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

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

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