1import { gql, useMutation } from '@apollo/client';
2
3const ADD_TODO = gql`
4 mutation AddTodo($type: String!) {
5 addTodo(type: $type) {
6 id
7 type
8 }
9 }
10`;
11
12
13function AddTodo() {
14 let input;
15 const [addTodo, { data }] = useMutation(ADD_TODO);
16
17 return (
18 <div>
19 <form
20 onSubmit={e => {
21 e.preventDefault();
22 addTodo({ variables: { type: input.value } });
23 input.value = '';
24 }}
25 >
26 <input
27 ref={node => {
28 input = node;
29 }}
30 />
31 <button type="submit">Add Todo</button>
32 </form>
33 </div>
34 );
35}
1// react-apollo includes two HOCs called graphql() and withApollo() that can be used to accomplish this.
2// This example takes the withApollo() HOC approach
3
4import React, { Component } from "react";
5import { DO_MUTATION } from "./mutations";
6import { withApollo } from "react-apollo";
7
8import SomeLibrary from "SomeLibrary";
9
10export class MyComponent extends Component {
11 render() {
12 return (
13 <Button
14 onPress={() => {
15 SomeLibrary.addListener(this.listenerHandler);
16 }}
17 />
18 );
19 }
20
21 listenerHandler = () => {
22 this.props.client.mutate({
23 mutation: DO_MUTATION,
24 variables: {
25 some_var: "some_val",
26 },
27 });
28 };
29}
30export default withApollo(MyComponent);
31