im developing my first cliet angular (v18) consuming an azure function app with graphql (hotcholate).

I have a problem with apollo apparently, when i try to consume the service, in the console.log of server i can see the consume to the azure function correctly and the return of data:

But in the client console its marks the next errors:

Additional i can’t see the data in my components, (im trying to show a list o products card) the list of products its ever empty.

I don’t know why it occurs; in my .net azure function i allow any origin. My code azure:

Startup.cs

[assembly: FunctionsStartup(typeof(Startup))]

public class Startup : FunctionsStartup
{
  public override void Configure(IFunctionsHostBuilder builder)
  {
    builder.AddDatabase();
    builder.Services.AddUseCases();
    
    builder
        .AddGraphQLFunction()
        .AddQueryType<Query>();

    // Configuración de CORS
    builder.Services.AddCors(options =>
    {
        options.AddDefaultPolicy(builder =>
        {
            builder
                .AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader();
        });
    });
   }
 }

My client code:

graphql.provider.ts

import { Apollo, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { ApplicationConfig, inject } from '@angular/core';
import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core';

const uri = 'http://localhost:7071/api/graphql/'; 
export function apolloOptionsFactory(): ApolloClientOptions<any> {
const httpLink = inject(HttpLink);
 return {
  link: httpLink.create({ uri }),
   cache: new InMemoryCache()
 };
}

export const graphqlProvider: ApplicationConfig['providers'] = [
 Apollo,
 {
  provide: APOLLO_OPTIONS,
  useFactory: apolloOptionsFactory,
 },
];

product.service.ts

import { Injectable, computed, signal } from '@angular/core';
import { Product } from '@core/models/product';
import { Apollo, gql } from 'apollo-angular';

interface State{
  products: Product[],
  error: any,
 loading: boolean
}

const GET_PRODUCTS = gql`
{
  productsPaginated(first: 10, after: null){
    nodes{
        key
        name
        price
        sale_price
        ratings
    },
    edges{
        cursor
    }
    pageInfo{
        hasNextPage,
        endCursor
    }
    totalCount
  }
 }
`;

@Injectable({
  providedIn: 'root'
})

export class ProductsService {
  #state = signal<State>({
    loading:true,
    products: [],
    error: false
});

public productsGet = computed(()=> this.#state().products);
public productsErrGet = computed(()=> this.#state().error);

constructor(private apollo : Apollo) {
  this.apollo.watchQuery({
   query: GET_PRODUCTS
  }).valueChanges.subscribe(({data, error} : any) => {

  console.log(data.productsPaginated.nodes);

  const products = data.productsPaginated.nodes.map((val: any): Product => ({
    key: val.key,
    name: val.name,
    price: val.price,
    sale_price : val.sale_price,
    ratings: val.ratings
  }));

    this.#state.set({
     loading:false,
     products: products,
     error: error
    });

  })
 }
}