apollo
apollo copied to clipboard
Using provideApolloClient overrides all subsequent clientId targeting
First off, thanks for the amazing work on Vue Apollo! Thankful to have something like this. 🚀
Describe the bug
This is possibly a user error, but I wasn't able to find much documentation around provideApolloClient.
We are using multiple clients in our large Vue/Nuxt 2 application. We are using the GQL CodeGen version of Vue Apollo but have also tried without the generated hooks and receive the same result.
The primary issue:
We are attempting to use some queries and mutations inside the context of a hook/composable in our vue application. It seems that provideApolloClient(client) overrides any subsequent declaration of clientIds that we specify in our queries or mutations.
Example:
// Page A, should use clientId: 'foo'
export default defineComponent({
setup() {
const { myHookInfo } = useMyHook();
return { myHookInfo };
}
});
// useMyHook.ts
const useMyHook = () => {
provideApolloClient(clientFoo);
const { mutate } = useMutation(DO_THING, { clientId: 'foo' });
mutate();
return { myHookInfo };
}
// Page B, should use clientId: 'bar'
export default defineComponent({
setup() {
const { result } = useQuery(GET_THING, { id: 123 }, { clientId: 'bar' });
const myData = useResult(result);
return { myData };
}
});
Looking at the simple code above ☝️, if I do the following:
- Go to Page A
- Then go to Page B.
I get an error because Page B is attempting to use the client from Page A (specifically the url). I've debugged the vue apollo code and it appears as though the clientId is passing through to the resolveClient as expected, but then Apollo appears to be using the previous client (or whatever client was initially passed into provideApolloClient) for every subsequent query and mutation. Even if I use provideApolloClient('bar') in Page B (or a hook used in Page B) it still uses whatever client was initially passed into the provideApolloClient method.
Expected behavior
I would expect provideApolloClient to not override the clientId that's explicitly provided in the query / mutation. I would also expect that it could be reset if the method was called again with a different clientId.
Versions "nuxt": "^2.15.2" "@vue/apollo-composable": "^4.0.0-alpha.16", "@apollo/client": "^3.3.11",
Additional context
It's totally possible that this is a giant user error, but I can't find any helpful documentation around provideApolloClient and the docs around useApolloClient aren't super helpful in this situation. Hoping that I'm just doing something silly and y'all can point me in the right direction!
Thanks again for the amazing work here!
I've identified the root cause of this issue:
Problem:
Vue Apollo is using the savedCurrentClient as the default client even when inside of a .vue file. This means that if you've set the client by using provideApolloClient at any point, it's going to continue to use that client instead of the one you're specifying in the current query or mutation because that savedCurrentClient var is based on the currentApolloClient var.
Solution:
I believe that these conditions should be swapped to look for and ID first and if one isn't provided then try and find a savedCurrentClient.
I'll put up a PR as soon as I can.
@Akryum PR up to fix this: https://github.com/vuejs/apollo/pull/1338