0

Actualmente tengo un servidor con GraphQL y estoy haciendo el frontend con React y quiero guardar datos en MongoDB.

Pero quiero que al usar el mutation usarlo como si fuera un metodo, en vez de como un componente, me explico.

STUDENT_MUTATION = gql`
        mutation createStudent($input: StudentInput!) {
            createStudent(input: $input) {
                _id
                name
                car {
                    _id
                    year
                    spaceInCar
                    status
                    plates
                }
                raiting
                photo
            }
        }`;

Este es mi Mutation y lo uso con este componente.

<Mutation mutation={this.STUDENT_MUTATION} variables={ this.state.studentInput }>
    {studentMutation => 
        <Button variant="contained" className="fullWidth" color="primary" onClick={studentMutation}>
            <Typography variant="h6"> Finish! </Typography>
        </Button>
    }
</Mutation>

Pero lo que estoy intendando hacer es que en vez de usar ese componente, sea una funcion algo asi.

registerStudent = () => {
    // lo que se tenga que hacer aqui.
}

Desconozco si se puede hacer eso. Actualmente estoy usando ApolloGraphQL. De antemano gracias por leer.

1 respuesta 1

1

Tienes dos opciones para no usar el componente <Mutate>.

Opcion 1: Usar los hooks que fueron publicados hace relativamente poco. https://www.apollographql.com/docs/react/api/react-hooks/#usemutation

Por ejemplo tu componente podria lucir asi.

import { useMutation } from '@apollo/react-hooks';

const RegisterStudent = ({studentInput}) => {
  const [registerStudentMutation, { data }] = useMutation(STUDENT_MUTATION);
  const registerStudent = () => {
    registerStudentMutation({variables: {input: studentInput})
  }
  return (
    <button onClick={registerStudent}>Finish</button>
  )
}

Opcion 2: Usar el metodo mutate que tiene tu cliente de apollo. Este tal vez mas de bajo nivel, por si estas usando Class Components. Pero para esto necesitas de alguna manera tener la instancia del cliente apollo que creaste con new ApolloClient({}) en alguna parte de tu app.

import { client } from "archivo/donde/iniciaste/apollo"

//Este puede ser un Class Component tambien
const RegisterStudent = ({studentInput}) => {
  const registerStudent = async () => {
    // usas el metodo mutate, que devuelve una 
    // promesa por lo que puedes usar async y await
    try {
      const response = await client.mutate({
        variables: {input: studentInput},
        mutation: STUDENT_MUTATION
      })
    } catch(err){
      console.log("oops! algo salio mal registrando este estudiante")
    }
  }
  return (
    <button onClick={registerStudent}>Finish</button>
  )
}

2
  • Muchas gracias por la respuesta. Pero ahora me ha surgido otra duda, que metodo debo de usar para hacer Queries? Actualmente tengo mi codigo estructurado como la opcion numero dos. Si pudieras comentar la documentacion de donde obtuviste la informacion me harias un gran favor. Gracias!
    – Thunder
    Commented el 12 mar. 2020 a las 20:36
  • 1
    @Thunder tendrías que usar client.query() La docu de esto no es muy obvia por que apollo intenta que uses más los hooks. Pero aca esta lo que el objecto client tendría apollographql.com/docs/react/api/apollo-client/… Commented el 12 mar. 2020 a las 22:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.