[Ajuda] Shopping Cart

Seria interessante se você pudesse dar mais contexto a sua pergunta, você poderia mandar o código completo do seu projeto pelo github? caso seja um projeto privado, mostre pelo menos os códigos relacionados a esses arquivos:

hooks/use-cart
componente onde adiciona item ao carrinho

Autor

bom dia vou mandar o link do meu ropositorio se puder me ajudar,agradeceria muito mesmo, estou a muito tempo tentado resolver isso, ja estou sem ideias
https://github.com/MayckonAl/eBackEnd

Eu imagino que possa ter se confundido mas o repositório que esteja falando seria este: https://github.com/MayckonAl/ecommerce, não? Acabei indo olha no seu perfil do github para achar. Caso seja ele, irei dar uma olhada e te retorno.

Autor

é esse mesmo, quando mandei para o git foi errado, agora ta atualizado
https://github.com/MayckonAl/eBackEnd

Boa noite! Eu tive um tempo agora e analisei seu código, creio que eu achei o problema:

Pelo que entendi, seu problema era quando adicionava um item no carrinho, no estado do carrinho estava correto mas no console.log dentro do componente do dropdown estava errado, né? então, no arquivo src/hooks/use-cart/index.js, pelo que entendi ele iria fazer a requisição passando os ids que estavam no carrinho, o backend iria retornar os itens que você queria porém filtrados pelos ids de itens que estavam no carrinho. Bem, na linha 5 deste arquivo aqui você tá passando "$ids", mas no arquivo src/hooks/use-cart/index.js onde você chama o useQuery você tá passando o nome da variável como "id", isso é assim mesmo? pelo que entendo o nome da variavel deveria ser igual, talvez você nem precise colocar ela dentro do filter também, algo tipo isso:

  const { loading, error, data } = useQuery(GET_IDS_CARDS, {
    skip: !cartItem?.length,
    variables: {
        ids: cartItem
    }
  })

Você pode tentar fazer um teste dos dois casos, tenta com ele dentro e fora do filter e ver qual funciona.

Autor

boa noite, agradeço muito por voce tirar um pouco do seu tempo para tentar me ajudar de coração !!
fiz o teste que voce sugeriu, eu pondo do jeito que voce sugeriu para de aparecer os items adicionados se eu por id ele volta a funcionar, porem com o mesmo problema que estava antes.
vou mandar uma foto de como fica o meu problema, gostaria que quando eu desse um click la no addToCart só adcionace o item que eu click, mas ele ao o invez ele adiciona todos os outros
https://imgur.com/a/bIPlbIT

Não precisa agradecer :). Agora sim creio que achei uma solução, vou te mandar aqui e você testa por aí quando puder.

Precisei alterar o arquivo src/pages/lib/queries/getIdsCards.js pelo motivo de ele de fato não ta filtrando nada, por isso ele sempre retornava todos os itens. vou explicar o motivo de cada mudança.

$ids: [ID]!: O tipo dessa variável de acordo com a própria documentação do graphql do seu projeto deveria ser um array de ids, essa variável vai ser usada para o filtro.
filters: { id: { in: $ids } }: A forma anterior estava incorreta, ele não estava filtrando nada, de acordo novamente com a documentação do graphql do seu projeto, ele diz que a estrutura de filtro tem que ser essa, podendo alterar por exemplo o "in", escolhendo outro tipo de operador que você consegue ver aqui.

import { gql } from '@apollo/client'

const GET_IDS_CARDS = gql`
  query get_idCard($ids: [ID]!) {
    cards(filters: { id: { in: $ids } }) {
      data {
        id
        attributes {
          valor
          description
        }
      }
    }
  }
`
export default GET_IDS_CARDS

Precisei alterar o arquivo src/hooks/use-cart/index.js para alterar como era passado a variável para a query e mudar como os ids são adicionados no carrinho.

ids: cartItem: Retirei o objeto filter e renomeei o id para ids, dessa forma no GET_IDS_CARDS, ele pega a variavel normalmente.

  const { data, loading } = useQuery(GET_IDS_CARDS, {
    skip: !cartItem?.length,
    variables: {
      ids: cartItem
    }
  })

id.id: Agora no lugar de ele jogar um objeto com id dentro, ele joga o próprio id, já que queremos passar o array de ids para o filtro, certo? Imagino que seja interessante mudar o nome da variável para não ficar redundante também, mas você decide.

  const addToCart = (id) => {
    const itemExiste = cartItem.find((itemId) => itemId === id.id)
    if (!itemExiste) {
      const newItems = [...cartItem, id.id]
      setCartItem(newItems)
    }
  }

Você pode adaptar para o seu projeto da melhor forma que achar, mas eu imagino que o caminho para a solução seja esse que te mandei, fiz pequenos testes localmente e funcionou. Espero que agora consiga resolver seu problema, qualquer coisa pode falar!

Autor