Is there a way to use* functions graphql from '@urql/vue' outside of vue3 setup()?

Question

I'm trying to use @urql/vue to perform graphql queries outside of vue3 setup(), using vuex for example. On vue2 I used the apollo-client this way and it worked normally. This is to be able to carry out the reuse of queries with greater ease. But an error returns to me that I don't know if there is any way around it, has anyone been through this and managed to resolve it?

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

this is my client definition: 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;
      });
  },
};

this is my service: initpayload.service.js

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

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

dependencies used:

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"
},

Is there a way to solve this, so that we can be using the use* functions in this way?

Because I want to use this same call, in another component, I intend to keep the function in a vuex action, to facilitate it at the time of use and not have the need to rewrite the same query. — Jefferson Bruchado, May 24 '21 at 17:36
did you figured this out or found another package or workaround? — norr, Jun 02 '21 at 01:48

score 2 · Answer 1 · answered Jul 12 '21 at 04:18

example from a quasar(vue3) app, allows for this.$gql.(query||mutation) but you can also import query/mutation to vuex etc:

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

Is there a way to use* functions graphql from '@urql/vue' outside of vue3 setup()?

1 Answers1