Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

236
Vistas
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 la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda