mutations apollo client code example
Example 1: apollo graphql mutation hook
const UPDATE_TODO = gql`
mutation UpdateTodo($id: String!, $type: String!) {
updateTodo(id: $id, type: $type) {
id
type
}
}
`;
function Todos() {
const { loading, error, data } = useQuery(GET_TODOS);
const [updateTodo] = useMutation(UPDATE_TODO);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return data.todos.map(({ id, type }) => {
let input;
return (
<div key={id}>
<p>{type}</p>
<form
onSubmit={e => {
e.preventDefault();
updateTodo({ variables: { id, type: input.value } });
input.value = '';
}}
>
<input
ref={node => {
input = node;
}}
/>
<button type="submit">Update Todo</button>
</form>
</div>
);
});
}
Example 2: apollo client mutation without component
// react-apollo includes two HOCs called graphql() and withApollo() that can be used to accomplish this.
// This example takes the withApollo() HOC approach
import React, { Component } from "react";
import { DO_MUTATION } from "./mutations";
import { withApollo } from "react-apollo";
import SomeLibrary from "SomeLibrary";
export class MyComponent extends Component {
render() {
return (
<Button
onPress={() => {
SomeLibrary.addListener(this.listenerHandler);
}}
/>
);
}
listenerHandler = () => {
this.props.client.mutate({
mutation: DO_MUTATION,
variables: {
some_var: "some_val",
},
});
};
}
export default withApollo(MyComponent);