He inicializado un estado basado en una llamada a la base de datos en un componente principal, y cuando lo actualizo, mi componente no se vuelve a procesar. La única razón real por la que elegí implementar el estado aquí es permitir una reproducción automática después de que un usuario decida cambiar su posición presionando el botón. Aquí está mi código

 import React, { useEffect, useState } from "react" import { Button, ButtonGroup, ToggleButton } from "react-bootstrap" import { useQuery, useMutation } from "@apollo/react-hooks" import { QUERY_ME_BASIC } from "../utils/queries" import { UPDATE_POSITION } from "../utils/mutation" function JobSwitchButton() { const { data } = useQuery(QUERY_ME_BASIC) const [updatePosition] = useMutation(UPDATE_POSITION) const [checked, setChecked] = useState(false); let user = data?.me || {} const initialPosition = user.customer ? ("customer") : ("driver") const [position, setPosition] = useState(initialPosition) var driver var customer const handleSubmit = async e => { e.preventDefault() console.log(e.target.value) if (e.target.value === "customer") { customer = true driver = false } else { customer = false driver = true } await updatePosition({ variables: { _id: user._id, driver: driver, customer: customer } }) setPosition(e.target.value) } return ( <> <Button value={user.customer ? ("driver") : ("customer")} onClick={handleSubmit}> {user.customer ? ("change to driver") : ("change to customer")} </Button> </> ) } export default JobSwitchButton

Agradezco cualquier entrada!