我正在尝试在 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* 函数?