nuxt-modules
The useQuery composable not recognizing clients.
Environment
{
"name": "nuxt-app",
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"@nuxt/eslint-config": "^0.1.1",
"@nuxtjs/apollo": "^5.0.0-alpha.6",
"@nuxtjs/eslint-module": "^4.0.2",
"@nuxtjs/i18n": "^8.0.0-beta.12",
"@nuxtjs/tailwindcss": "^6.7.0",
"@types/node": "^18",
"eslint": "^8.41.0",
"nuxt": "^3.5.0",
"sass": "^1.62.1"
},
"dependencies": {
"@vue/apollo-composable": "^4.0.0-beta.11",
"@vueuse/core": "^10.2.0",
"lodash.debounce": "^4.0.8",
"nuxt-icons": "^3.2.1",
"nuxt-swiper": "^1.1.0"
}
}
Describe the bug
I'm trying to perform a simple API call with useQuery composable. First of all, to use this composable I need to install @vue/apollo-composable with --force in order to be able to use useQuery. There is no mention of this in the documentation. The main problem is as follows. These are my configs:
nuxt.config.ts:
export default defineNuxtConfig({
modules: [
'@nuxtjs/eslint-module',
'@nuxtjs/tailwindcss',
'@nuxtjs/i18n',
'nuxt-icons',
'nuxt-swiper',
'@nuxtjs/apollo'
],
apollo: {
clients: {
default: './apollo/clients/default.ts',
rick: './apollo/clients/rick.ts'
}
}
})
apollo/clients/default.ts:
import { defineApolloClient } from '@nuxtjs/apollo'
export default defineApolloClient({
httpEndpoint: 'http://headless.local/graphql'
})
apollo/clients/rick.ts:
import { defineApolloClient } from '@nuxtjs/apollo'
export default defineApolloClient({
httpEndpoint: 'https://rickandmortyapi.com/graphql'
})
And this is the setup script of my test.vue page:
<script setup lang="ts">
const query = gql`
query character {
results {
image
id
}
}
`
const variables = {}
const options = { clientId: 'rick' }
const data = useQuery(query, variables, options)
console.log(data)
</script>
Instead of getting the standard response object in browser console, I'm getting this error:
Uncaught (in promise) Error: No apolloClients injection found, tried to resolve 'rick' clientId
Expected behaviour
I'm not getting the expected response from useQuery request as described in "Describe the bug" section. I provided the used version of all packages inside the "Environment" section.
Reproduction
No response
Additional context
No response
Logs
No response
For what it's worth, I'm fighting with the same situation. I'm totally new to nuxt, so some user error is likely on my behalf.
Same problem here. useQuery composable does not work. It says @vue/apollo-composable is missing. Documentation does not say we need to install @vue/apollo-composable and even trying it had a dependency conflict and needs a --force param. comparing this module to vue-apollo, there are many features those are missing here. I've tried to use vue-apollo without this module but I haven't been able to properly add it to nuxt: 3.7.
I remember I already encountered this problem and I'm surprised it's still a thing. I thought it was going be a quickly solved as it's an essential composable. But this issue has been present for several months now.
For what it's worth, I think I found a work-around. When you install @vue/apollo-composable to fix the dependency issue, use the specific version defined in this project's dependencies, which at the time of writing is @vue/[email protected].
npm i -D @vue/[email protected]
pnpm i -D @vue/[email protected]
yarn add -D @vue/[email protected]
With this version, things appear to be working again!
For what it's worth, I think I found a work-around. When you install
@vue/apollo-composableto fix the dependency issue, use the specific version defined in this project's dependencies, which at the time of writing is@vue/[email protected].npm i -D @vue/[email protected] pnpm i -D @vue/[email protected] yarn add -D @vue/[email protected]With this version, things appear to be working again!
This fixed the issue for me
More possibly useful info, if you need the latest version of @vue/apollo-composable like I did to gain access to awaitable load from useLazyQuery for suspense support, you can work around the provide issue by creating this plugin in your plugins directory:
// plugins/apollo.client.ts
import { provideApolloClients } from '@vue/apollo-composable';
export default defineNuxtPlugin((nuxtApp) => {
// @ts-expect-error nuxt-apollo module needs updated types
provideApolloClients(nuxtApp.$apollo.clients);
});
This issue is fixed and a workaround is no longer required in my project on the latest version!
@Diizzayy Looks like this issue is appearing again. 😢
I did a little more investigating and I think I know why. The DefaultApolloClient and ApolloClients keys meant to be used for provide/inject exported by @vue/apollo-composable are Symbols, and as such when the @vue/apollo-composable version being used by this module (4.0.0-beta.11 at time of writing) and the version used in a project (4.0.0-beta.12 is the latest release), the keys being used do not match anymore because technically the symbols being exported/imported are different values when coming from different versions.
I feel a possible long-term solution to this problem would be to make @vue/apollo-composable a peerDependency in this project so that the internal version used matches the version used in the project. I believe you can also mark peer deps as optional so that people can still install the module without explicitly installing the peer dep for simplicity sake.
This also means there is yet another workaround for people like me... if you set the overrides field in your package.json to be the latest version it should start working again (as long as this module is still compatible of course!)
"overrides": {
"@vue/apollo-composable": "^4.0.0-beta.12"
}
Thanks a lot @danielwaltz it has resolved issue. Now I am able to use useMutation with clientId.
