apollo
apollo copied to clipboard
Error: Network error: Failed to fetch nuxt2 typescript
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?