Refetch with New Variables Overrides Other Existing Refetches

[aLpSabre]

I'm encountering a challenge with refetching data in a Vue.js application using Vue Apollo, particularly after changing the context. Our application's context changes dynamically, making it essential to fetch the most up-to-date data from the server. This is crucial since the entities in our application are shared with mutations across these various contexts.

GraphQL query:

query BookList($libraryContext: LibraryContextFilter, $filter: ListFilter) {
 books(libraryContext: $libraryContext, filter: $filter) {
     page
     limit
     total
     items {
      id
      title
      genre
      author {
        name
      }
     }
   }
}

In the BookStore:

const bookFilter = computed(() => ({
    library: bookStore.libraryFilter,
}));

const {
    loading: queryLoading,
    onResult,
    error,
    refetch,
} = useQuery<{ books: BookList }>(BookListQuery, bookFilter,options);

In the component Book.vue:

watch(
    libraryContext,
    async (value) => {
        await bookStore.refetch({ libraryContext: value, fetchPolicy: "network-only" })
        selectedBooks.value = [];
    },
    { deep: true }
);

The issue arises when refetching data after a context change. I noticed that using a refetch with the fetchPolicy: "network-only" seems to inadvertently alter the default fetch policy for other queries and refetch operations within the application. As a solution, I've reverted the fetch policy to cache-first for other refetch operations.

My question is: Is this overriding behavior of the refetch is an expected behavior or a bug? Is there a more appropriate method to ensure fresh data retrieval from the server without impacting the global fetch policy settings?

Versions "vue": "^3.4.15", @vue/apollo-composable: "^4.0.1", "@apollo/client": "^3.8.10",

[nickmessing]

Why do you pass fetchPolicy to the refetch? refetch will always make a network call.