Server-side calls fail with undefined statusCode

[jvanst]

TLDR: The host needs to be an absolute URL. i.e host: 'http://localhost:3000/v1/graphql'. A path like /v1/graphql will not work

Hey there 👋. I'm running into a problem with server-side requests and I not sure how to continue debugging the issue.
I'm using Hasura to generate a graphQL API, with cookie based authentication.

I have a useAsyncData call:

<script setup lang="ts">
let { data } = await useAsyncData('organizations', async () => {
  try {
    return await GqlOrganizations();
  } catch (err) {
    console.log(err)
  }
});
</script>

which throws this error:

{
  client: 'default',
  operationType: 'query',
  operationName: 'Organizations',
  statusCode: undefined,
  gqlErrors: undefined
}

If I make the call without the wrapped async function

if (process.server) {
  await GqlOrganizations()
}

I get the following error:

[Vue warn]: Unhandled error during execution of setup function 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/" >
[nuxt] [request error] [object Object]

[Vue warn]: Invalid prop: type check failed for prop "statusCode". Expected String with value "500", got Number with value 500.
[nitro] Error while generating error response FetchError: 302  (/__nuxt_error?url=/&statusCode=500&statusMessage=Internal+Server+Error&message=[object+Object]&description=%3Cpre%3E%3C/pre%3E&data)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.errorhandler [as onError] (.nuxt/dev/index.mjs:312:16)
    at async Server.nodeHandler (/node_modules/h3/dist/index.mjs:373:9)

---

Any calls made from the browser work great:

if (process.client) {
  await GqlOrganizations()
}

[Diizzayy]

@jvanst Thank you for bringing forth this issue, my first assumption was that the server side authentication was failing but that is unlikely.

Would you be able to provide a basic reproduction or give me access to the api so that I can further investigate the underlying cause here? I haven't been able to recreate this behavior locally

[Diizzayy]

@jvanst No problem at all, I'm more than happy to help. I'll have a look at your project shortly and will update you accordingly.

[Diizzayy]

@jvanst The issue is caused by the url proxied via the nuxt-proxy module. Requests resolve properly on client side as you mentioned, but it requires the host to be explicitly defined on server.

I can update this module to account for proxied urls and attempt to complete the url based on the host and protocol.

Also, Great work on your project thus far! Feel free to reach out to me if you have any questions or need assistance.

[jvanst]

Big thanks for taking time to look at this.

I'm proxying requests to simplify cookie authentication and CORS. Its definitely possible to get by without nuxt-proxy but adds additional logic elsewhere.

Glad you liked the project so far

[Diizzayy]

@jvanst I understand, the implementation below should meet your needs without adding unnecessary complexity

// temporary workaround, change accoringly based on dev / prod env
host: 'http://localhost:3001/v1/graphql',
clientHost: '/v1/graphql',

[jvanst]

Great, that is working like a charm! That should work for my needs