useQuery blocks page load on 4.0.0

zorelias commented 9 months ago

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>

zorelias commented 9 months ago

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

micchickenburger commented 9 months ago

Bernardao commented 3 months ago

In my case it wasn't working a mutation gql. Downgrading to @nuxtjs/apollo": "5.0.0-alpha.11 It worked

nickmessing commented 3 months ago

@zorelias this seems to be an issue with dependency manager's module resolution rather than the library itself.

vuejs / apollo

useQuery blocks page load on 4.0.0 #1531