В чем ошибка и как исправить?

Question

[Сергей Бут]

Понемногу пытаюсь разобраться в GraphQL, но очень тяжело идет.
Суть в том, что хочу через Vuex экшн получить какие-то данные (из открытого API GraphQL), записать их в стейт и пока все. Использую vue-apollo , но при попытке запроса вебпак выкидывает ошибку:


Код стора:

import Vue from 'vue'
import Vuex from 'vuex'

import gql from 'graphql-tag'
import { ApolloClient } from 'apollo-client'


Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    ipAddress:[]
  },
  mutations: {
    setIP(state,payload){
      state.ipInfo=payload
    }
  },
  actions: {
    async GET_INFO({commit},payload){
      let ipf=(payload+"").split('.').join(''); // throw away all dots (new API required IP like a solid string)
      
      const response= await ApolloClient.query({
        query: gql`{
          ipAddress(address: $ip) {
              city {
                  id
                  country {
                      name
                      id
                      continent {
                          name
                          id
                      }
                      currencies {
                          isoCode
                      }
                  }
                  location {
                      lat
                      long
                  }
                  name
              }
          }
        }`,
        variables:{
          ip: ipf
        }
      });
      //commit('setIP',response.data);
    }
  },
  modules: {
  }
})

Код конфига apollo ( main.js ) :

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'

Vue.use(VueApollo)

const httpLink = createHttpLink({
  // You should use an absolute URL here
  uri: 'https://api.everbase.co/graphql?apikey=alpha',
  fetch
})
const cache = new InMemoryCache()
// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
})
const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

Vue.config.productionTip = false


new Vue({
  apolloProvider,
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Comments

[Сергей В]

смущает, что в одном файле вы делаете new ApolloClient(...) а в другом хотите сразу ApolloClient.query(...)
во втором случае вам бы обратиться к созданному экземляру из первого файла, или создать и проиниализировать ещё один

Answer 1

[Alex]

У вас определенно как-то не правильно подключается ApolloClient
Перепроверьте раздел

Я бы на вашем месте, вынес всё вот это в отдельный файл

// apollo-plugin.js
import Vue from 'vue'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'

Vue.use(VueApollo)

const httpLink = createHttpLink({
  // You should use an absolute URL here
  uri: 'https://api.everbase.co/graphql?apikey=alpha',
  fetch
})
const cache = new InMemoryCache()
// Create the apollo client

export const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
})
export const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

А потом бы просто импортировал то что нужно:

import {apolloProvider} from 'apollo-plugin.js'
import {apolloClient} from 'apollo-plugin.js'