logaretm / villus

🏎 A tiny and fast GraphQL client for Vue.js

Home Page:https://villus.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

refetchTags without making a mutation

csprance opened this issue · comments

I love villus! We've been using it an application we're writing for digital asset management (not crypto, 3d assets).

My problem is I have actions happening in my application which are not graphql mutations but still should cause queries to refetch.

This is the pattern I'm using currently and I wanted to just get a gut check to see if this is wild and dumb or if there is a built in way to do this.

export function refetchQueriesByTags(refetchTags: QueryTags[]) {
  const { execute } = useMutation(
    {},
    {
      refetchTags,
    },
  );
  execute();
}

Then in my pinia store I can do something like this

export const useAssetsStore = defineStore("assets", () => {
  /**
   * Used in the Search Bar to know what to search for
   */
  const searchString = ref("");

  /**
   * Watch the searchString ref and when it changes call a refetch
   */
  watch(searchString, () => {
    refetchQueriesByTags([QueryTags.ASSETS_DATA]);
  });
...

Then in a component I can bind searchString to a v-model and it will cause my queries to refetch whenever this is changed.

The part I'm concerned about is I seem to just be hacking the fact that useMutations allows an empty query object.

Is there a better way to do this?
Am I using an anti-pattern?

export function refetchQueriesByTags(refetchTags: QueryTags[]) {
  const client = getActiveClient();
  client.refetchTaggedQueries(refetchTags);
}

Actually this seems like the best way to do it rather than useMutation.

Yep, that would be the way to do it, I hadn't thought about it until you opened the issue.

Do you need anything specific to make this easier? I think the solution you suggested works best.