I'd love to use useQuery, useMutation, but we only can define it in setup. so I extended it to use outside of setup and component. The idea to extends comes from pinia.

I create a sampe here: https://stackblitz.com/edit/vue-9ebjy6?file=src/App.vue , and this commit should enable it.

something should be notice:

• add a new choice param(manualClient) in useQuery etc, to enable these function outside of component. eg: before app mounted. We can manually send the created client to enable it.
• when useSubscription outside of setup, due to unable register beforeUnmounted, It is recommended to pause it by user.

This commit should fix https://github.com/logaretm/villus/issues/149;

hope it will be help.

in the root app I am using useClient inside setup like so:

<script setup lang="ts">
...
useClient({
  url: 'https://...',
  use: [myPlugin, ...defaultPlugins()],
})
</script>

and in the page I have

export default {
  async setup() {
    ...
    const { data } = await useQuery({
      ...
    })
  }
}

locally everything works fine but when deployed to netlify with SSR I am getting the following error:

Versions with Issue : Rc0 + Rc1

Issue happens when getReport() is called on change of a date. When getReport() is called during page load /setup it works fine.

Logic of program is when date input is changed, send useQuery to fetch data using the selected date.

App.VUE

<script lang="ts">
import { SubscriptionClient } from "subscriptions-transport-ws";
import { defineComponent, computed } from "vue";
import DesktopMenu from "./components/DesktopMenu.vue";
import { router } from "./main";
import { useClient } from "villus";

import { ActionTypes, MutationTypes, useStore } from "./store";

export default defineComponent({
  name: "Navigation",
  components: {
    DesktopMenu,
  },
  setup() {
    const store = useStore();

    useClient({
      url: "/graphql",
    });

  },
});
</script>

Home.VUE

<template>
  <div>
    Home
    <input v-model="datePage" type="date" />
    <p v-if="returnData">
      {{ returnData }}
    </p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watchEffect } from "vue";
import { useQuery } from "villus";

import { CostDocument } from "../generated/graphql-operations";

export default defineComponent({
  name: "HelloWorld",
  setup() {
    const returnData = ref();
    const datePage = ref("2020-10-18");
    const formattedDate = computed(() =>
      datePage.value.toString().split("-").join(""),
    );

    const data = ref(null);
    watchEffect(async (datePage) => {
      async function getReport() {
        try {
          console.log("date value changed:", formattedDate);

          const { data, error } = await useQuery({
            query: CostDocument,
            variables: { date: formattedDate.value },
          });

          console.log("Query:", data, error);
          returnData.value = data;
        } catch (error) {
          console.log("error", error);
        }
      }
      data.value = await getReport();
    });

    return { returnData, datePage };
  },
});
</script>

Hi, I'm pretty new to Vue3, and I'm wondering how I would need to go about invoking an API request using Villus in e.g. an action inside a Pinia Store?

It gives the following error:

Even though I useClient in the Store right before the call.

If you could help me out I'd love to open a PR to update the documentation with an example as well

Hi! First of all, amazing GraphQL client!

There is however one thing I can't seem to figure out. I was wondering how I should set the headers for the batch plugin. Without the batch plugin I made an auth plugin as stated in the docs and this works fine until I add the batch plugin to the mix. I need to set the credentials to include as well as set an X-XSRF-TOKEN header. if I add the batch plugin the requests all return a 419 No reason phase as the X-XSRF-TOKEN header doesn't get set.

How should I do that?

Hi, many thanks for creating villus. Since using typed useQuery() is quite verbose, is it possible to extract this to a function outside the .vue component, also to be able to reuse it better across different components? If so, can you provide an example?

I'm trying to write unit tests in Jest for my Vue application, but I'm running into problems because of Villus, and I'm not entirely sure how I should go about mocking things like useMutation and useQuery. Any tips?

This is the error I'm getting:

  ● GameCard.vue › renders platforms and developers when passed

    Cannot detect villus Client, did you forget to call `useClient`?

      57 |     });
      58 |
    > 59 |     const { execute: executeFavoriteGame } = useMutation(FavoriteGameDocument);

The Jest test looks like this:

import { createLocalVue, mount } from '@vue/test-utils'
import GameCard from '@/components/GameCard.vue'

const localVue = createLocalVue();

describe('GameCard.vue', () => {
  it('renders platforms and developers when passed', () => {
    const wrapper = mount(GameCard, {
      stubs: ['router-link', 'router-view'],
      localVue,
      propsData: {
        game: {
          id: 1,
          platforms: {
            nodes: [
              {
                id: 1,
                name: 'Nintendo Switch'
              }
            ]
          },
          developers: {
            nodes: [
              {
                id: 1,
                name: 'Valve'
              }
            ]
          },
          isFavorited: true
        }
      }
    })
    expect(wrapper.text()).toMatch('Nintendo Switch')
  })
})

and my component looks like this:

<template>
  <div class="custom-card game-card">
    <router-link :to="{ name: 'Game', params: { id: game.id } }" class="card-container">
      <figure class="game-cover">
        <img v-if="game.coverUrl !== null" :src="game.coverUrl" />
        <img v-else src="@/assets/images/no-cover.png"/>
      </figure>
      <div class="card-content">
        <p class="title is-4 mr-10">{{ game.name }}</p>
        <p class="subtitle is-6" v-if="platforms !== null">{{ platforms }}</p>
        <p class="subtitle is-6" v-if="developers !== null">{{ developers }}</p>
      </div>
    </router-link>

    <!-- Game card Dropdown -->
    <div class="dropdown dropdown-dynamic game-card-dropdown is-right" :class="{ 'is-active': isActive }" v-if="userSignedIn">
      <div class="dropdown-trigger">
        <button class="button is-borderless is-shadowless" aria-haspopup="true" aria-controls="dropdown-menu" @click="toggleActive">
          <SvgIcon :name="'chevron-down'" :classes="['icon']" :size="15" />
        </button>
      </div>
      <div class="dropdown-menu" id="dropdown-menu" role="menu">
        <div class="dropdown-content">
          <a v-if="game.isFavorited || localIsFavorited" class="dropdown-item" @click="unfavoriteGame">Unfavorite</a>
          <a v-else class="dropdown-item" @click="favoriteGame">Favorite</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Company, FavoriteGameDocument, Platform, UnfavoriteGameDocument } from '@/generated/graphql';
import { computed, defineComponent, ref } from '@vue/composition-api';
import SvgIcon from '@/components/SvgIcon.vue';
import { useMutation } from 'villus';

export default defineComponent({
  name: 'GameCard',
  components: {
    SvgIcon
  },
  props: {
    game: {
      required: true,
      type: Object
    }
  },
  setup(props, context) {
    const platforms = computed(() => {
      if (props.game.platforms.nodes.size === 0) { return null; }
      return props.game.platforms.nodes.map((p: Platform) => p.name).join(', ');
    });
    const developers = computed(() => {
      if (props.game.developers.nodes.size === 0) { return null; }
      return props.game.developers.nodes.map((d: Company) => d.name).join(', ');
    });

    const { execute: executeFavoriteGame } = useMutation(FavoriteGameDocument);
    const { execute: executeUnfavoriteGame } = useMutation(UnfavoriteGameDocument);

    let isActive = ref<boolean>(false);

    // Tracks whether the game has been favorited, will be toggled when the
    // mutation is executed so we don't have to reload the game record.
    let localIsFavorited = ref<boolean>(props.game.isFavorited);

    const favoriteGame = () => {
      executeFavoriteGame({ id: props.game.id }).then(() => {
        toggleActive();
        localIsFavorited.value = true;
      });
    };

    const unfavoriteGame = () => {
      executeUnfavoriteGame({ id: props.game.id }).then(() => {
        toggleActive();
        localIsFavorited.value = false;
      });
    };

    const toggleActive = () => isActive.value = !isActive.value;

    const userSignedIn = computed(() => {
      return context.root.$store.state.userSignedIn;
    });

    return {
      isActive,
      platforms,
      developers,
      favoriteGame,
      unfavoriteGame,
      toggleActive,
      userSignedIn,
      localIsFavorited
    };
  }
});
</script>

I'm using Vue 2.x with TypeScript and @vue/composition-api.

See similar docs for Apollo: https://apollo.vuejs.org/guide/testing.html#testing

{pause, resume} = useSubscription({query: Something})

pause()
resume()
pause()
resume()
pause()
resume()

The resume function will create a new subscription, and restart previous subscription. There are multiple subscriptions be subscribed at the same time.

Is there a way to prevent Villus from imposing a [Network] Internal Server Error when the GraphQL server responds with a 500 status code ? When I configure the server to send 200 on error instead, I can access the GraphQL errors returned from the combined error just fine.

Maybe add some kind of custom error handling / formatting feature ?

When configuring subscriptions like the documentation suggests, TS complains with the following error:

Type 'Observable<ExecutionResult<{ [key: string]: any; }, { [key: string]: any; }>>' is not assignable to type 'ObservableLike<OperationResult<any>>'.
  Types of property 'subscribe' are incompatible.
    Type '(observer: Observer<ExecutionResult<{ [key: string]: any; }, { [key: string]: any; }>>) => { unsubscribe: () => void; }' is not assignable to type '(observer: ObserverLike<OperationResult<any>>) => Unsub'.
      Types of parameters 'observer' and 'observer' are incompatible.
        Type 'ObserverLike<OperationResult<any>>' is not assignable to type 'Observer<ExecutionResult<{ [key: string]: any; }, { [key: string]: any; }>>'.
          Types of property 'next' are incompatible.
            Type '(value: OperationResult<any>) => void' is not assignable to type '(value: ExecutionResult<{ [key: string]: any; }, { [key: string]: any; }>) => void'.
              Types of parameters 'value' and 'value' are incompatible.
                Property 'error' is missing in type 'ExecutionResult<{ [key: string]: any; }, { [key: string]: any; }>' but required in type 'OperationResult<any>'.

What I'm doing is the following:

import { createClient, handleSubscriptions, defaultPlugins } from "villus";
import { SubscriptionClient } from "subscriptions-transport-ws";

const subscriptionClient = new SubscriptionClient("ws://localhost:4000/api/graphql", { reconnect: true });

export const villus = createClient({
  url: "/api/graphql",
  use: [handleSubscriptions((operation) => subscriptionClient.request(operation)), ...defaultPlugins()],
});

Any idea what I'm doing wrong ?

Hello i try to use query batching with worpdress graphql but i got a error CombinedError

When i don't use the batcher() i see 2 call with no error

When i activate it

    useClient({
      url: '/cms/graphql',
      fetch: batcher()
    })

I see the call, the response seem to be good, an array of 2 objects

But i get an error on each component response.

Do you have an idea of who we can fix that ? A villius issue or wp-graphql issue ?

Thanks

Hello,

I'm following the documentation page https://villus.logaretm.com/guide/mutations/#handling-errors but I'm receiving an undefined response from the mutation.

My method

    login(test) {
      const {execute} = useMutation(loginMutation);

      return execute({
        test: test,
      }).then((result) => {
        console.log("result", result);
      }).catch((error) => {
        console.error(error);
      });
    },

Response from the server

{"errors":[{"message":"test is invalid.","path":["login"],"extensions":{"code":"INTERNAL_SERVER_ERROR","exception":{"message":"test is invalid.","path":["login"],"stacktrace":["GraphQLError: test is invalid.","    at login (file:///****/AuthModule.js:113:17)","    at processTicksAndRejections (node:internal/process/task_queues:96:5)","    at async file:///***/@graphql-tools/batch-execute/index.mjs:354:36","    at async Promise.all (index 0)","    at async DataLoader.batchExecuteLoadFn [as _batchLoadFn] (file:///****/@graphql-tools/batch-execute/index.mjs:352:25)"]}}}],"data":null}

Result from the console

test {data: undefined, error: undefined}

Versions:

• Villus: 2.0.1
• Vue: 3.2.45
• Vite: 4.0.0
• NPM 8.1.4

Is this an issue or what I'm doing wrong?

Thanks in advance!

to call useClient? Alternatively, you can explicitly pass a client as the manualClient argument.

To start off, thank you logaretm! Villus looks really cool and since apollo does not seem to work via cdn, it really keeps the spirit alive of vue usable for any size project.

I'm trying to do a minimal proof of concept, following along https://gitmemories.com/logaretm/villus Maybe I'm getting access to villus in the most awkward way possible, but what happens is the useClient is called successfully in the mounted() handling, but on the clickLoad handler I get "vue.global.js:1414 Uncaught Error: Cannot detect villus Client, did you forget to call useClient? Alternatively, you can explicitly pass a client as the manualClient argument."

I haven't messed around with the manualClient because it seems like I must be doing something fundamentally wrong. Am I way off in the weeds here?

I looked at the two comments where you explained that it can only be used during a composition api setup call. Will this not work at all when using options? I see this true: https://github.com/logaretm/villus/issues/72#issuecomment-716261003 Oddly, even when I move over to composition api and use the <script setup> I'm still having this same problem. I can't find anything manualClient either.

Essentially, the most recent versions of Vue CLI/Jest don't play nicely with WaitForExpect anymore, unfortunately. Because of this, I had to switch to waitFor() from the @vue/testing-library package. Only once I did that was I able to upgrade to Jest v27. The "Writing Tests" docs recommend the waitForExpect package, but it might be a good idea to update that to recommend testing library's waitFor, or at least mention it as an alternative? https://villus.logaretm.com/guide/testing#writing-tests

I have a commit here with some more details and the specific change I ended up going with for my own project: https://github.com/connorshea/vglist-frontend/commit/6aa9128004b8907dd40cc8c170535bcd37ff6f02

sorry this is not an issue per se; but I couldn't find a satisfying answer anywhere else

Is there a proven strategy for the following?

• User calls the api using a JWT auth
• Authorizer rejects the token (eg: expired) and returns 401
• App calls a refresh token api and renew the JWT
• App re-execute the query that originally failed transparently

I've been toying with the Plugin API and could get up to the refresh part, but there doesn't seem to be a way to centralize the "retry" strategy in this case.

We're to the point where we are wrapping useQuery/useMutation to handle this in 1 place, but I was wondering if there's a better way? 🤔

Thanks

When using the graphql-ws example in the docs from the subscriptions page, I get the follow typings issue:

Argument of type '(operation: any) => { subscribe: (obs: any) => void; }' is not assignable to parameter of type 'SubscriptionForwarder<any>'.
  Call signature return types '{ subscribe: (obs: any) => void; }' and 'ObservableLike<StandardOperationResult<any>>' are incompatible.
    The types returned by 'subscribe(...)' are incompatible between these types.
      Type 'void' is not assignable to type 'Unsubscribable'.

As a first time user to the repo, I had a quick look at the issues and there's a lot about Nuxt 3. As a fellow Nuxt 3 user, it would be helpful to have a nuxt/SSR guide.