Nuxt + @vue/apollo-composable - fetch only by server

[tcastelly]

Describe the bug I'm using Nuxt. I would want to be able to fetch queries defined by @vue/apollo-composable by the client.

It works with the default component creation

export default {
  name: 'Graphql',
  apollo: {
    testQuery: {
      prefetch: false, // <--
      query: TestQuery,
    },
  },
}

But not with the composition-api

export default defineComponent({
  setup() {
    const { result } = useQuery(TestQuery, {}, {
      prefetch: false, // <--
    });

    return {
      result,
    };
  },
});

The current behavior that I have, is a pending query. If I replace the prefetch: false by fetchPolicy: 'no-cache' I have an Ajax query AND a fetch by the server.

export default defineComponent({
  setup() {
    const { result } = useQuery(TestQuery, {}, {
      fetchPolicy: 'no-cache',
      //      prefetch: false,
    });

    return {
      result,
    };
  },
});

To Reproduce

1. Checkout this project: https://github.com/shenron/vue-nuxt-tsx
2. Try the page grahpql.vue and graphql_composition.vue

Expected behavior To be able to fetch only by the client

Versions vue: 2.6.11 vue-apollo: 3.0.3 apollo-client: 2.6.10

[lewebsimple]

@tcastelly I'm struggling to get NuxtJS and Apollo Composable (i.e. vue-apollo v4) working nicely together.. I couldn't find a single working example until I found your vue-nuxt-tsx project (thanks for that!). This issue by @NickBolles did the trick to get apollo client wired up properly but now I'm facing the same issue with client-side only fetching. Apollo client v3 support would also be nice, but the vue-apollo project seems inactive since a couple of months and there isn't a decent tutorial on the subject, which isn't helping...

[NickBolles]

@tcastelly I'm struggling to get NuxtJS and Apollo Composable (i.e. vue-apollo v4) working nicely together.. I couldn't find a single working example until I found your vue-nuxt-tsx project (thanks for that!). This issue by @NickBolles did the trick to get apollo client wired up properly but now I'm facing the same issue with client-side only fetching. Apollo client v3 support would also be nice, but the vue-apollo project seems inactive since a couple of months and there isn't a decent tutorial on the subject, which isn't helping...

Glad to hear that worked for you!

I'm pretty sure I manually pinned apollo client to v3 and it worked just fine, but I'm not 100% sure.