apollo client mutation without component

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