Nuxt3 - SSR is not working properly

[eligiv]

Environment

https://dev.vizit.co/

Describe the bug

I have some stange issue with the SSR behavior in my site, anytime i try to enter the site

via incognito or after clear cookies the useAsyncQuery is not fetching via the server, after refresh its working.

The code is:

The console.log return null in the first request, after refresh the data is fetched correctly.

I have no idea why its happend, very strange behavior. I tried also to use Node v16 \ v17, in both the build worked but the site didnt shown properly.

Also, its working well in my localhost also, with the same node version.

Expected behaviour

Load the useAsyncQuery from the server everytime.

Reproduction

No response

Additional context

No response

Logs

No response

[dolbex]

I 100% have this same issue. However, when I ran Node 18 LTS on my localhost I was able to reproduce the error. Rolling back to 16 LTS fixed it again. I believe there are some active changes happening with Apollo Global moving to v2 which have better support for 17+. It may take a while for Apollo Foundation to update their packages to reflect this change.

[devhoangkien]

// nuxt.config.ts
apollo: {
    autoImports: true,
    authType: 'Bearer',
    authHeader: 'Authorization',
    tokenStorage: 'cookie',
    clients: {
      default: {
        httpEndpoint: process.env.GRAPHQL_ENDPOINT,
      },
    },
  },

node v18.12.1

I used localStorage at first and got the same error as you. After i removed tokenStorage from nuxt.config it worked properly. i tried switching from localStorage to cookie and it worked. you can try like me

[eligiv]

// nuxt.config.ts
apollo: {
    autoImports: true,
    authType: 'Bearer',
    authHeader: 'Authorization',
    tokenStorage: 'cookie',
    clients: {
      default: {
        httpEndpoint: process.env.GRAPHQL_ENDPOINT,
      },
    },
  },

node v18.12.1

I used localStorage at first and got the same error as you. After i removed tokenStorage from nuxt.config it worked properly. i tried switching from localStorage to cookie and it worked. you can try like me

My problem was with the defineCustomize function that put some data in cookies, its very similar to what you mentioned, but problem is solved, thank you.

[git-e-001]

This is my nuxt config

` apollo: {
    autoImports: true,
    authType: "JWT",
    authHeader: 'Authorization',
    tokenStorage: 'cookie',
    clients: {
      default: {
        tokenStorage: 'cookie',
        httpEndpoint:
          process.env.NUXT_PUBLIC_API_CLIENT || "http://127.0.0.1:8000/graphql",
        httpLinkOptions: {
          credentials: "include",
        },
      },
    },
  },`

my query is

 const { data }: any = await useAsyncQuery(fetchUserQuery, variables);
    console.log(data.value, 'dddd');

Result is null

@eligiv i faced same problem but not yet solve. Please help me.

[Dinuz]

@eligiv you should reopen this! @Diizzayy @dolbex This issue is still present using node v18.13.0 and npm v9.4.0 I am with "@nuxtjs/apollo": "^5.0.0-alpha.5" and "nuxt": "^3.1.1"

SSR doesn't fetch and refresh data. It is clear that the issue because if you disable it ssr: false, then the data are fetched properly.

Is this a NODE version Issue? If I print in console the apollo error i get the following:

{                                                                                                                                                                              21:59:51
  operation: {
    variables: {},
    extensions: {},
    operationName: 'getCategories',
    query: { kind: 'Document', definitions: [Array], loc: [Location] }
  },
  networkError: TypeError: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:14062:11)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    cause: Error: connect ECONNREFUSED ::1:1337
        at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1487:16) {
      errno: -61,
      code: 'ECONNREFUSED',
      syscall: 'connect',
      address: '::1',
      port: 1337
    }
  },
  graphQLErrors: undefined,
  forward: [Function (anonymous)]
}

@devhoangkien can you show your config? The only way to work for me is to put ssr: false in the config, but that defeat the point of even using nuxt

[Dinuz]

@dolbex @eligiv @devhoangkien @git-e-001 I believe I found the issue and a potential solution check it out

https://github.com/nuxt-modules/apollo/issues/473#issuecomment-1414565754

[leeevin97]

@Dinuz try to use 127.0.0.1 instead of localhost in your apollo client config - works for me!

[smgdesign]

Setting host to 127.0.0.1 worked for me.

Switching back to node v16 also worked, but setting tokenStorage to cookie didn't. This is with: "@nuxtjs/apollo": "^5.0.0-alpha.6", "nuxt": "^3.6.5",

I was getting a 500 error using SSR and works perfectly when client-side loading.

[ChamperNet]

Any updates on this issue? I'm trying node v18.7.1 with nuxt v3.7.1 and @nuxtjs/apollo: "next". Same problem: works only with disabled option ssr in Nuxt config.

[davidohne]

TBH this error is not solved and I'm kind of puzzled that this is not a problem for more people. Also the suggested solution is not accessible anymore. @eligiv I think this should be reopened since it can be easily reproduced.

[smgdesign]

TBH this error is not solved and I'm kind of puzzled that this is not a problem for more people. Also the suggested solution is not accessible anymore. @eligiv I think this should be reopened since it can be easily reproduced.

What is your host set to? And what errors do you see? The issue for me was caused due to the server side code not resolving localhost correctly. Setting it to 127.0.0.1 works. Also setting a FQDN works as expected when in a deployed environment.

[davidohne]

I found the solution... Since I'm using self signed certificates during development and a nginx server to proxy pass to the graphql backend when doing a full page reload the nuxtjs/apollo client/nodejs doesn't accept the self signed certificates. After the page is loaded completely the connection to the backend can be established.

To use self signed certificates for the graphql backend it is necessary to add the env variable "NODE_TLS_REJECT_UNAUTHORIZED=0". I've added it to the package.json and now everything is working... OMG. 1 1/2 days...

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 HOST=0.0.0.0 nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },