apollo icon indicating copy to clipboard operation
apollo copied to clipboard

Error: Network error: Failed to fetch nuxt2 typescript

Open onward-web opened this issue 3 years ago • 0 comments

I have error if use this.$apollo.query in method of component.

Error: Network error: Failed to fetch at new ApolloError (bundle.esm.js?74ca:63:1) at eval (bundle.esm.js?74ca:1247:1) at eval (bundle.esm.js?74ca:1559:1) at Set.forEach () at eval (bundle.esm.js?74ca:1557:1) at Map.forEach () at QueryManager.broadcastQueries (bundle.esm.js?74ca:1555:1) at eval (bundle.esm.js?74ca:1161:1)


<script>
import { GET_STORE_INFO } from '@/graphql/queries/StoreInfo'
import { defineComponent} from '@nuxtjs/composition-api';
export default defineComponent({
  name: "ContactForm",
  data() {
    return {
      name: '0',
      email: '',

    }
  },
  methods: {
    onSubmit (event) {


      this.$apollo.query({
        query: GET_STORE_INFO,
        variables: {
          var2: "this is a variable222"
        }})
          .then(({ data }) => {
            console.log(data)
          }).catch((e) => {
              console.log(e); // error 
          })
    }
  },
});
</script>

nuxt.config.ts

import type { NuxtConfig } from '@nuxt/types'

const config: NuxtConfig = {
  build: {
    transpile: [
      '@vue/apollo-composable'
    ]
  },
  buildModules: [
    '@nuxtjs/composition-api/module',
    '@nuxt/typescript-build'

  ],
  css: [
    '~assets/css/app.css',
  ],
  env: {
    nuxtGraphqlApiUrl: 'https://api.onward-web.pp.ua/graphql',
  },
  head: {
    title: 'nuxt-community/typescript-template',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'A boilerplate to start a Nuxt+TS project quickly' }
    ],
    link: []
  },
  loading: { color: '#0c64c1' },
  modules: [
    
     '@nuxtjs/i18n',     
    '@nuxtjs/svg-sprite',
    '@nuxtjs/apollo'
  ],
  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'https://api.onward-web.pp.ua/graphql'
      } 
    }
  },
  store: {

  },
 
}

export default config

package.json

{
  "name": "nuxt-community-typescript-template",
  "description": "A boilerplate to start a Nuxt+TS project quickly",
  "version": "2.15.8",
  "private": true,
  "dependencies": {
    "@bchteam/vue-jivosite": "^1.0.0",
    "@nuxtjs/apollo": "^4.0.1-rc.5",
    "@nuxtjs/composition-api": "0.32.0",
    "@nuxtjs/i18n": "^7.2.3",
    "@nuxtjs/svg-sprite": "^0.5.2",
    "@vue/apollo-composable": "^4.0.0-alpha.19",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-link": "^1.2.14",
    "apollo-link-context": "^1.0.20",
    "apollo-link-http": "^1.5.17",
    "graphql-tag": "^2.12.6",
    "gsap": "^3.6.0",
    "nuxt": "2.15.8",
    "nuxt-ssr-screen-size": "github:hugojerez/nuxt-ssr-screen-size",
    "svg4everybody": "^2.1.9",
    "v-click-outside": "^3.2.0",
    "vue-constellation": "github:onward-web/vue-constellation",
    "vue-js-modal": "^2.0.1",
    "vue-number-animation": "^1.1.2",
    "vue-partivleground": "github:onward-web/vue-partivleground",
    "vue-quick-menu": "github:onward-web/vue-quick-menu",
    "vee-validate": "^3.4.14"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --max-warnings 0 --ext .ts,.vue ."
  },
  "devDependencies": {
    "@nuxt/types": "2.15.8",
    "@nuxt/typescript-build": "2.1.0",
    "@nuxtjs/eslint-config-typescript": "10.0.0",
    "eslint": "8.15.0"
  }
}

in nuxtServerInit query is work fine.

let client = this.app.apolloProvider.defaultClient

        try {
            const res = await client.query({
                query: GET_STORE_INFO,
                variables: {
                    var1: "this is a variable"
                },
                context: {
                    headers: {
                        'X-Hasura-Role-Test': "public1"
                    }
                },


            }).then(({ data }) => data && data.StoreInfo)

            commit(MutationType.CHANGE_STORE_INFO, <StoreInfoState> res)
        
        } catch (e) {
            console.log('error GET_STORE_INFO')
        }

Tell me, please, what is the reason for the error when using query in the component methods, and how to fix it?

onward-web avatar Aug 20 '22 20:08 onward-web