Apollo GraphQL mutasjoner med Komponer bildet

stemmer
0

Jeg har nylig kom over med denne “Forenkle reagere komponenter med Apollo og Komponer” @stubailo https://dev-blog.apollodata.com/simplify-your-react-components-with-apollo-and-recompose-8b9e302dea51

Den viser hvordan du kan gjøre GraphQL søk med teksten på nytt. Jeg lurte på om noen kan gi et eksempel på å gjøre en GraphQL mutasjon med teksten på nytt. Som sender inn et skjema eller noe lignende.

Høyt verdsatt.

Publisert på 22/02/2017 klokken 19:38
kilden bruker
På andre språk...                            


1 svar

stemmer
1

Komponere bruk med mutasjoner er ganske mye det samme som med spørringer. Enkel (ikke testet) eksempel med et skjema nedenfor. Skjemaet komponent har en tekstboks og mottar en submitForm egenskap. Denne eiendommen er kartlagt til UpdateThing mutasjon gjennom apollo HoC wrapper og blir gått de nødvendige argumentene.

Form.jsx

export default class Form extends React.Component {
  state = {
    name: this.props.name
  };

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.submitForm(this.props.id, this.state.name);
  };

  handleChangeName = (e) => {
    this.setState({
      name: e.target.value
    });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" id="name" name="name" onChange={this.handleChangeName} value={this.state.name} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

FormContainer.jsx

const withQuery = ... // Assume query code here

const withUpdateThing = graphql(gql`
  mutation UpdateThing($id: ID!, $name: String!) {
    updateThing(id: $id, name: $name) {
      id
      name
    }
  }
`, {
  props: ({ mutate }) => ({
    submitForm: (id, name) => mutate({ variables: { id, name } })
  })
});

export default compose(withQuery, withUpdateThing)(Form);

Som deretter kan brukes ved å gjøre <FormContainer id={1} />. withQueryinjiserer den nameprop, withUpdateThinginjiserer submitForm(id, name)prop.

Svarte 22/02/2017 kl. 21:49
kilden bruker

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more