Giters

vuejs / apollo

🚀 Apollo/GraphQL integration for VueJS

Home Page:http://apollo.vuejs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

useQuery blocks page load on 4.0.0

zorelias opened this issue · comments

commented

Describe the bug
After upgrading from 4.0.0-beta.12 to 4.0.0, page loads stop working when using useQuery

To Reproduce
I have a Nuxt ^3.9.3 project using Vue 3.4.15 and Apollo Composable 4.0.0. When using the 4.0.0-beta.12 branch, my index page loads as expected. When upgraded to 4.0.0, the index page spins forever and never loads anything. I have confirmed that removing the call to useQuery allows the page to load, and downgrading back to the beta also works.

package.json

{
	"type": "module",
	"devDependencies": {
		"@graphql-codegen/add": "^5.0.0",
		"@graphql-codegen/cli": "^5.0.0",
		"@graphql-codegen/typescript": "^4.0.1",
		"@nuxt/devtools": "latest",
		"@nuxt/test-utils": "^3.10.0",
		"@nuxtjs/apollo": "5.0.0-alpha.11",
		"@nuxtjs/eslint-config-typescript": "^12.1.0",
		"@nuxtjs/storybook": "7.0.0",
		"@storybook-vue/nuxt": "0.2.1",
		"@storybook/addon-essentials": "7.6.7",
		"@storybook/addon-interactions": "7.6.7",
		"@storybook/addon-links": "7.6.7",
		"@storybook/blocks": "7.6.7",
		"@storybook/builder-vite": "7.6.7",
		"@storybook/testing-library": "^0.2.2",
		"@storybook/vue3": "7.6.7",
		"@tailwindcss/aspect-ratio": "^0.4.2",
		"@tailwindcss/forms": "^0.5.7",
		"@tailwindcss/typography": "^0.5.10",
		"@types/node": "^18.19.8",
		"@vue/test-utils": "^2.4.3",
		"eslint": "^8.56.0",
		"eslint-config-prettier": "^9.1.0",
		"eslint-plugin-nuxt": "^4.0.0",
		"eslint-plugin-prettier": "^5.1.3",
		"eslint-plugin-promise": "^6.1.1",
		"eslint-plugin-vue": "^9.20.1",
		"graphql-codegen-typescript-mock-data": "^3.7.1",
		"jsdom": "^23.2.0",
		"nuxt": "^3.9.3",
		"prettier": "^3.2.4",
		"prettier-plugin-tailwindcss": "^0.5.11",
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"storybook": "7.6.7",
		"unplugin-auto-import": "^0.17.3",
		"unplugin-vue-components": "^0.26.0",
		"vitest": "^1.2.1",
		"vue": "^3.4.15",
		"vue-router": "^4.2.5"
	},
	"dependencies": {
		"@headlessui/vue": "^1.7.17",
		"@nuxtjs/tailwindcss": "^6.11.0",
		"@vue/apollo-composable": "4.0.0",
		"@vueuse/core": "^10.7.2"
	}
}

Snippet of src/pages/index.vue

<template>
...
</template>
<script lang="ts" setup>
const myIndexQuery = gql`
...
`
const { result, loading, variables } = useQuery(myIndexQuery, {
	page: 0,
	size: 25,
	params: {},
	direction: 'ASC',
	property: 'title',
});
</script>
commented

A little update on my investigation: this appears to be a conflict in requiring @vue/apollo-composable explicitly along with @nuxtjs/apollo, which includes its own version of the composable library. Interestingly, when only using @nuxtjs/apollo, useQuery is reported as undefined and the auto-injected import fails (while other imports, like useAsyncQuery, work fine).

Even more interestingly, if I use pnpm instead of npm, it works fine without the explicit requirement of @vue/apollo-composable