Buscar pedidos de um usuario usando graphQL

Olá, estou tentando criar uma nova página de pedidos e preciso de algumas informações que não vem no endpoint da API OMS que lista todos os pedidos do usuário, como o customData e os Itens, que tem informações relevantes para essa nova página.

Consigo consultar a lista de pedidos de um determinado cliente, mas por conta da falta de informações eu teria que consultar novamente para cada pedido da lista em um outro endpoint do OMS, só que eu não consigo fazer isso dentro de um loop. Então pensei em criar uma consulta com graphQl para resolver essa situação.

a minha query:

query customerOrders($items: [String], $page: Int!, $perPage: Int!) {
  customerOrders(page: $page, perPage: $perPage) {
    list {
      orderId
      status
      value
      creationDate
      lastChange
      orderGroup
      totals {
        id
        name
        value
      }
      items {
        uniqueId
        id
        productId
        quantity
        name
        refId
        price
        listPrice
        imageUrl
        detailUrl
      }
      clientProfileData {
        email
        firstName
        lastName
      }
      shippingData {
        selectedAddresses {
          receiverName
          street
          number
          complement
          neighborhood
          postalCode
          city
          state
          country
          reference
        }
      }
      paymentData {
        transactions {
          payments {
            paymentSystem
            paymentSystemName
          }
        }
      }
    }
  }
}

recebo o erro:

{
  "data": null,
  "errors": [
    {
      "message": "User not authenticated",
      "extensions": {
        "code": "INTERNAL_SERVER_ERROR",
        "exception": {
          "message": "User not authenticated",
          "name": "AuthenticationError",
          "status": 401,
          "code": "UNAUTHENTICATED",
          "level": "warn"
        }
      },
      "operationId": "f583a242-d7f9-4b13-bd71-670d20c2989b",
      "requestId": "7cd036521724489a9f72c495535df9e2"
    }
  ]
}

meu problema é que não estou conseguindo passar a autenticação para a query, como faço isso? já tentei assim:

const { data: dataAuth } = useFullSession()

const [idClientCookie, setIdClientCookie] = React.useState<VtexIdclientAutCookie >()

React.useEffect(() => {
    const dataSession: any = dataAuth
    const sessionProfile: any = dataSession?.session?.namespaces?.profile
    const idAuth: any = dataSession?.session?.cookie?.VtexIdclientAutCookie

    if (sessionProfile) {
      setUser(sessionProfile)
      setIdClientCookie(idAuth)
    }
  }, [dataAuth, user])

const { data: ordersTest, error } = useQuery(query, {
    fetchPolicy: 'cache-and-network',
    context: {
      headers: {
        vtexidclientautcookie: idClientCookie?.value,
      },
    },
    variables: { page, perPage, items: idClientCookie?.value },
  })

no terminal o erro é esse:

Error: GraphQL error: Invalid value "undefined" for header "vtexidclientautcookie"
    at new ApolloError (bundle.esm.js:63:1)
    at push.../../../../modules/ff03acce7dd0a09128c97887512ff7d20b8e62890ee369223344f929a9b683a9/dev/node_modules/apollo-client/bundle.esm.js.ObservableQuery.getCurrentResult (bundle.esm.js:159:1)
    at push.../../../../modules/ff03acce7dd0a09128c97887512ff7d20b8e62890ee369223344f929a9b683a9/dev/node_modules/@apollo/react-hooks/lib/react-hooks.esm.js.QueryData.getQueryResult (react-hooks.esm.js:265:1)
    at QueryData._this.getExecuteResult (react-hooks.esm.js:73:1)
    at push.../../../../modules/ff03acce7dd0a09128c97887512ff7d20b8e62890ee369223344f929a9b683a9/dev/node_modules/@apollo/react-hooks/lib/react-hooks.esm.js.QueryData.execute (react-hooks.esm.js:106:1)
    at react-hooks.esm.js:380:43
    at useDeepMemo (react-hooks.esm.js:354:24)
    at useBaseQuery (react-hooks.esm.js:380:1)
    at useQuery (react-hooks.esm.js:399:1)
    at ListOrders (ListOrders.tsx:79:47)

o valor de idClientCookie?.value não é undefined , acredito que não estou conseguindo passar a informação da maneira correta.

Oi @jacksonadh! Algumas perguntas para ajudar a entender o seu cenário:

  • Qual API GraphQL você está usando?
  • Você já deu uma olhada na documentação sobre Autenticação?

Oi @georgebrindeiro estou usando duas API’s

para pegar a sessão do usuario: “VTEX.session-client”: “1.x”,

para pegar as informações do pedido: “VTEX.orders-graphql”: “0.x”

vou olhar essa documentação, vi outras documentações mas não tinha encontrado essa ainda.

@georgebrindeiro preciso fazer a autenticação no front-end e essa documentação que você mandou não consegui encontrar uma forma de fazer isso no front