Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

242
Visualizações
400 error on graphql mutation from gatsby to node backend

So the mutation works in graphiql so the issue is frontend, basically I have a function tied to an onClick that captures some input value and that value is sent to the backend server to update the database. Here is the request.

const updateTitle = async () => {
        //api data
        const data = await fetch(`http://localhost:8081/graphql`, {
            method: 'POST',
            body: JSON.stringify({
                query: `
                    mutation {
    updateMenu(menuInput: {_id: ${elementId},title: ${inputValue}}){
    title
  }
}
                `
            }),
            headers: {
                'Content-Type': 'application/json'
            }
        })
        //convert api data to json
        const json = await data.json();
        console.log(json)
    }

here is what is console logged: (Array is just where the error was)

{message: 'Syntax Error: Invalid number, expected digit but got: "c".', locations: Array(1)}

Because I am mapping an array of objects from a mongo database Im able to use the assigned Id for the mutation, console logged that and its fine, a previous button sets that Id into a state used in the query, and the input data is also set into a state which is used used in the mutation. The mutation takes place after setting these states so i cant see it being an async issue.

Here are the functions that set the input value and call the function with the fetch request. (the Id is set inside the array map function)

 const [inputValue, setInputValue] = useState(" ");
    const handleInput = event => {
        setInputValue(event.target.value);
    };

    const logInputValue = () => {
        console.log(inputValue);
        updateTitle()
        // window.location.reload()
    };

Please let me know if any more information is needed to answer! I wont initially include the whole map function because its a working mess. But here is the code for the button inside the map function that starts the whole process.

<button onClick={() => { logInputValue(); setElementId(item._id); }}>save</button> </div>}

Thank you!!

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda