I’ve nearly depleted all my mental energy on this.

I am working with NuxtJS and have created a page, /task2, to experiment with so that I don’t interfere with other functions that are already working.

// pages/Task2.vue

<template></template>

<script setup>   
const query = gql`
  query FetchTask {
        task {
            id
            task
            status
        }
    }
`

const { data } = await useAsyncQuery(query);

for (let index = 0; index < data?._rawValue?.task.length; index++) {
     const element = data?._rawValue?.task[index];
     console.log(element);
}
</script>

in Laravel 11

// app/GraphQL/Schemas/DefaultSchema.php

class DefaultSchema implements ConfigConvertible
{
    public function toConfig(): array
    {
        return [
            'types' => [
                TaskType::class,
            ],
            'query' => [
                TaskQuery::class,
            ],
            'mutation' => [
            ],
            'method' => ['GET', 'POST'],
            'middleware' => ['auth:sanctum'],
        ];
    }
}

if I comment

'middleware' => ['auth:sanctum']

there will be results

but if I uncomment

'middleware' => ['auth:sanctum']

data is undefined

now nuxt.config.ts looks like this

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'

const endpoint = process.env.GRAPHQL_ENDPOINT;

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  build: {
    transpile: ['vuetify'],
  },
  modules: [
    '@nuxtjs/apollo',
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }))
      })
    },
  ],
  vite: {
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
  apollo: {
    autoImports: true,
    authType: 'Bearer',
    authHeader: 'Authorization',
    tokenStorage: 'localStorage',
    proxyCookies: true,
    clients: {
      default: {
        httpEndpoint: `${endpoint}`,
        browserHttpEndpoint: '',
        wsEndpoint: '',
        httpLinkOptions: {},
        wsLinkOptions: {},
        websocketsOnly: false,
        connectToDevTools: false,
        defaultOptions: {},
        inMemoryCacheOptions: {},
        tokenName: 'apollo:<client-name>.token',
        tokenStorage: 'localStorage',
        authType: 'Bearer',
        authHeader: 'Authorization'
      },
      auth: './apollo/auth.ts',
    },
  },
});

I put all already what was defined here https://apollo.nuxtjs.org/getting-started/configuration

As a result of trial and error, but still server side is not returning the result I need.

Several trials I did like:

const headers = {
  authorization: `Bearer 85|QRtDLHummrrtawE9zDSzFVKtToD2rKqlZR3ZM56E6c8b4db2`,
};

const opts = { query, headers };
const { data } = await useAsyncQuery(opts);
console.log(data);

It may seem straightforward, but the documentation lacks direct examples for handling cases like Sanctum.

Any idea?