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

Question

我试图在 vue3 setup() 之外@urql/vue 执行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;

应用程序.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,
    });
  },
};

使用的依赖项：

包.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* 函数？

Answer 1

来自 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
  }
})