nuxt-modules / apollo

Nuxt.js module to use Vue-Apollo. The Apollo integration for GraphQL.
https://apollo.nuxtjs.org
MIT License
929 stars 195 forks source link

Nuxt 3 Composable usage: status code 400 #468

Open hermesalvesbr opened 1 year ago

hermesalvesbr commented 1 year ago

Environment

Nuxt project info:                                                    15:00:27

------------------------------
- Operating System: `Linux`
- Node Version:     `v18.12.1`
- Nuxt Version:     `3.0.0`
- Nitro Version:    `1.0.0`
- Package Manager:  `pnpm@7.21.0`
- Builder:          `vite`
- User Config:      `ssr`, `runtimeConfig`, `modules`, `apollo`, `app`
- Runtime Modules:  `@nuxtjs/apollo@5.0.0-alpha.5`, `@nuxtjs/tailwindcss@6.2.0`, `nuxt-icon@0.1.8`, `@pinia/nuxt@0.4.6`
- Build Modules:    `-`
------------------------------

Describe the bug

This request:

async getCompanyProfile() {
        const query = gql`
          query getCompanyProfileByID($id: String!) {
            empresa(filter: { id: { _eq: $id } }) {
              id
              nome
              cnpj
              razao_social
              email
              ie_estadual
              ie_municipal
              telefone
              cep
              bairro
              complemento
              estado
              cidade
              endereco
              numero
              regime_fiscal
            }
          }
        `;
        const variables = { id: "dc604b7" };
        try {
          const { result } = await useQuery(query, variables);
        } catch (e) {
          console.log(e);
        }

Give me this error: {"errors":[{"message":"GraphQL validation error.","extensions":{"code":"GRAPHQL_VALIDATION_EXCEPTION","graphqlErrors":[{"message":"Cannot query field \"empresa\" on type \"Query\".","locations":[{"line":2,"column":3}]}]}}]}

Expected behaviour

Without filter, just using limit: 10, works fine. But a filter with query parameter didn't work. My backend server is directus v9. But with postman, works fine: image

Reproduction

I'm using Directus for GraphQL backend:

https://docs.directus.io/reference/query.html#filter

Additional context

I'm using Apollo Module inside a composable in nuxt.

Logs

No response

hermesalvesbr commented 1 year ago

Terminal show me this errors:

Error: nuxt instance unavailable   09:08:35
    at Module.useNuxtApp
     at readRawCookies
     at Module.useCookie
      at updateAuth
      at onLogin
      at Proxy

"@nuxtjs/apollo": "5.0.0-alpha.5",

hermesalvesbr commented 1 year ago

Captura de tela de 2023-01-11 11-57-52 Captura de tela de 2023-01-11 11-56-27 Captura de tela de 2023-01-11 11-56-16

masterkain commented 1 year ago

I have the same issue

500
nuxt instance unavailable

at Module.useRequestEvent (./node_modules/nuxt/dist/app/composables/ssr.mjs:14:58)
at readRawCookies (./node_modules/nuxt/dist/app/composables/cookie.mjs:52:62)
at Module.useCookie (./node_modules/nuxt/dist/app/composables/cookie.mjs:23:19)
at getToken (./node_modules/@nuxtjs/apollo/dist/runtime/composables.mjs:45:68)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async setup (./pages/channels.js:42:12)
<script setup>
const { getToken } = useApollo()

const currentUserAuthToken = await getToken()
</script>
masterkain commented 1 year ago

so, is getToken broken with nuxt in ssr mode? anybody got it working?

masterkain commented 1 year ago

I keep having this issue when ssr is enabled.

[Vue warn]: Unhandled error during execution of setup function
  at <Channels onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
[nuxt] error caught during app initialization H3Error: nuxt instance unavailable
    at Module.useNuxtApp (/usr/src/app/node_modules/nuxt/dist/app/nuxt.mjs:173:13)
    at Module.useRequestEvent (/usr/src/app/node_modules/nuxt/dist/app/composables/ssr.mjs:14:58)
    at readRawCookies (/usr/src/app/node_modules/nuxt/dist/app/composables/cookie.mjs:52:62)
    at Module.useCookie (/usr/src/app/node_modules/nuxt/dist/app/composables/cookie.mjs:23:19)
    at getToken (/usr/src/app/node_modules/@nuxtjs/apollo/dist/runtime/composables.mjs:45:68)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async setup (/usr/src/app/pages/dashboard/channels.vue:16:124) {
  statusCode: 500,
  fatal: false,
  unhandled: false,
  statusMessage: undefined,
  __nuxt_error: true
}
// dashboard/channels.vue
<script setup lang="ts">
const { getToken } = useApollo()
const currentUserAuthToken = await getToken()
</script>

can someone advise if is there anything that can be done?

I'm not sure if this can be related https://github.com/nuxt/nuxt/issues/13965#issuecomment-1397323668 @danielroe

aapokiiso commented 12 months ago

I've opened PR #524 that should fix this issue.