有没有办法在vue3 setup之外使用'@urql/vue'中的*函数graphql？

问题描述

我正在尝试使用 @urql/vue 在 vue3 setup() 之外执行 graphql queries，例如使用 vuex。在 vue2 上，我以这种方式使用了 apollo-client，它正常工作。 这是为了能够更轻松地进行查询的重用。但是一个错误返回给我，我不知道是否有任何解决方法，有没有人解决过这个问题并设法解决它？

urql-vue.mjs?091e:36 Uncaught (in promise) Error: use* functions may only be called during the `setup()` or other lifecycle hooks.

这是我的客户定义： client.js

import { createClient } from '@urql/vue';
import { DEV_SERVER_URI } from '../../../../../config/environment/Constants';

const client = createClient({
  url: DEV_SERVER_URI,requestPolicy: 'cache-and-network',});

export default client;

App.js

import { createApp } from 'vue';
import urql from '@urql/vue';
import App from './App.vue';
import router from './router';
import store from './store';
import clientGql from './services/api/graphql/config/client';

(async function () {
  // This is where I want to call my vuex action.
  const user = await store.dispatch('initpayload/setinitPayload');
}());

const app = createApp(App);
app.use(urql,clientGql);
app.use(store);
app.use(router);
app.mount('#app');

initpayload.actions.js

import InitPayloadService from '@/services/api/graphql/modules/initpayload';

export default {

  setinitPayload: ({ commit }) => {
    console.log('setinitPayload');
    return InitPayloadService
      .getinitPayload()
      .then((res) => {
        const { aboutMe } = res.data.getinitPayload;
        return aboutMe;
      });
  },};

这是我的服务：initpayload.service.js

import { useQuery } from '@urql/vue';
import initPayloadQueries from './initpayload.queries';

export default {
  getinitPayload() {
    return useQuery({
      query: initPayloadQueries.GET_INIT_PAYLOAD,});
  },};

使用的依赖项：

package.json

"dependencies": {
    "@urql/vue": "^0.4.0","core-js": "^3.6.5","graphql": "^15.5.0","vue": "^3.0.0","vue-router": "^4.0.0-0","vuex": "^4.0.0-0"
},

有没有办法解决这个问题，以便我们可以这样使用 use* 函数？

解决方法

来自 quasar(vue3) 应用的示例，允许 this.$gql.(query||mutation) 但您也可以将查询/变异导入 vuex 等：

import { boot } from 'quasar/wrappers'

// https://formidable.com/open-source/urql/docs/basics/vue/
import { defaultExchanges,createClient } from '@urql/core'
import { devtoolsExchange } from '@urql/devtools'

import { auth } from './auth'

const client = createClient({
  url: process.env.GRAPH_API,...((process.env.DEV || process.env.GRAPH_API.includes('staging')) && { exchanges: [devtoolsExchange,...defaultExchanges] }),fetchOptions: () => {
    const token = auth.user() ? auth.session().access_token : null
    return {
      headers: {
        'apikey': process.env.APP_API_KEY,'Access-Control-Allow-Origin': '*','Access-Control-Allow-Methods': 'GET,POST,PATCH,PUT,DELETE,OPTIONS','Access-Control-Allow-Headers': 'Origin,Content-Type,X-Auth-Token,apikey',...(auth.user() && {
          'x-hasura-user-id': auth.user().id,'x-hasura-role': auth.user().role,'Authorization': `Bearer ${token}`
        }),},};
  }
})

export const query = async (query,params = {}) => {
  return client.query(query,params).toPromise()
}
export const mutation = async (query,params = {}) => {
  return client.mutation(query,params).toPromise()
}

export default boot(async ({ app }) => {
  app.config.globalProperties.$gql = {
    query,mutation
  }
})