Using useAsyncQuery on the server

[veselin1v]

Environment

Hello! I'm using nuxt 3.5.2 and nuxtjs/apollo 5.0.0-alpha.6. Is it possible to call the useAsyncQuery method on the server side?.

Describe the bug

I've created a js file in server->api directory and trying to call useAsyncQuery method on the server.

import useAsyncQuery from '@nuxtjs/apollo'

export default defineEventHandler(async (event) => {

    const query = await readBody(event)

    const { data } = await useAsyncQuery(query)

    return data
})

Expected behaviour

The method didn't worked and I've got the following error:

[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'nuxt')                                                                           8:40:07 AM
  at normalizedModule (./node_modules/@nuxt/kit/dist/index.mjs:2112:35)  
  at ./.nuxt/dev/index.mjs:906:26  
  at runMicrotasks (<anonymous>)  
  at processTicksAndRejections (node:internal/process/task_queues:96:5)  
  at async Object.handler (./node_modules/h3/dist/index.mjs:1255:19)  
  at async toNodeHandle (./node_modules/h3/dist/index.mjs:1330:7)  
  at async ufetch (./node_modules/unenv/runtime/fetch/index.mjs:9:17)  
  at async $fetchRaw2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:206:26)  
  at async $fetch2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:239:15)  
  at async setup (./pages/[lang]/news/index.vue:37:12)

Reproduction

No response

Additional context

No response

Logs

No response

[sduduzog]

useAsyncQuery uses useAsyncData under the hood, it shouldn't be used server side. Try using useQuery instead

[DarkLink13]

Had the same issue, useAsyncQuery throwing errors, and can't use await in useQuery, so i had to use apollo client:

import gql from 'graphql-tag';
import { provideApolloClient, useApolloClient } from '@vue/apollo-composable';
import {
  ApolloClient,
  createHttpLink,
  InMemoryCache,
} from '@apollo/client/core';

// event handler
const httpLink = createHttpLink({
          uri: process.env.API_URL,
        });
        const cache = new InMemoryCache();

        const apolloClient = new ApolloClient({
          link: httpLink,
          cache,
        });

        provideApolloClient(apolloClient);
        try {
          const { resolveClient } = useApolloClient();
          const client = resolveClient();

          const {
            data: { login },
          } = await client.mutate({
            mutation: gql`
              mutation Login($email: String!, $password: String!) {
                login(email: $email, password: $password) {
                  payload
                  refreshExpiresIn
                  success
                  errors
                  unarchiving
                  token
                  refreshToken
                }
              }
            `,
            variables: credentials,
          });
          return login;
        } catch (error) {
          throw error;
        }
      }

[devkon-at]

Is there a more up-to-date solution to run nuxt-apollo in defineEventHandler()?

useQuery is not defined in the server context. docs state: "useQuery can comfortably be used in any scenario." but i think that only means in SSR?

Im testing in this stackblitz: https://stackblitz.com/edit/nuxt-starter-oxpccs?file=app.vue

Any ideas?

[marco-land]

Having the same problem 👍