@apollo/react-hooks

1
npm install @apollo/react-hooks

1
import { useQuery } from '@apollo/react-hooks';
2
import gql from 'graphql-tag';
3

4
const GET_GREETING = gql`
5
  query getGreeting($language: String!) {
6
    greeting(language: $language) {
7
      message
8
    }
9
  }
10
`;
11

12
function Hello() {
13
  const { loading, error, data } = useQuery(GET_GREETING, {
14
    variables: { language: 'english' },
15
  });
16
  if (loading) return <p>Loading ...</p>;
17
  return <h1>Hello {data.greeting.message}!</h1>;
18
}

1
function useQuery<TData = any, TVariables = OperationVariables>(
2
  query: DocumentNode,
3
  options?: QueryHookOptions<TData, TVariables>,
4
): QueryResult<TData, TVariables> {}

1
import { useLazyQuery } from "@apollo/react-hooks";
2
import gql from "graphql-tag";
3

4
const GET_GREETING = gql`
5
  query getGreeting($language: String!) {
6
    greeting(language: $language) {
7
      message
8
    }
9
  }
10
`;
11

12
function Hello() {
13
  const [loadGreeting, { called, loading, data }] = useLazyQuery(
14
    GET_GREETING,
15
    { variables: { language: "english" } }
16
  );
17
  if (called && loading) return <p>Loading ...</p>
18
  if (!called) {
19
    return <button onClick={() => loadGreeting()}>Load greeting</button>
20
  }
21
  return <h1>Hello {data.greeting.message}!</h1>;
22
}

1
function useLazyQuery<TData = any, TVariables = OperationVariables>(
2
  query: DocumentNode,
3
  options?: LazyQueryHookOptions<TData, TVariables>,
4
): [
5
  (options?: QueryLazyOptions<TVariables>) => void,
6
  QueryResult<TData, TVariables>
7
] {}

1
import { useMutation } from '@apollo/react-hooks';
2
import gql from 'graphql-tag';
3

4
const ADD_TODO = gql`
5
  mutation AddTodo($type: String!) {
6
    addTodo(type: $type) {
7
      id
8
      type
9
    }
10
  }
11
`;
12

13
function 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
function useMutation<TData = any, TVariables = OperationVariables>(
2
  mutation: DocumentNode,
3
  options?: MutationHookOptions<TData, TVariables>,
4
): MutationTuple<TData, TVariables> {}

1
const COMMENTS_SUBSCRIPTION = gql`
2
  subscription onCommentAdded($repoFullName: String!) {
3
    commentAdded(repoFullName: $repoFullName) {
4
      id
5
      content
6
    }
7
  }
8
`;
9

10
function DontReadTheComments({ repoFullName }) {
11
  const {
12
    data: { commentAdded },
13
    loading,
14
  } = useSubscription(COMMENTS_SUBSCRIPTION, { variables: { repoFullName } });
15
  return <h4>New comment: {!loading && commentAdded.content}</h4>;
16
}

1
function useSubscription<TData = any, TVariables = OperationVariables>(
2
  subscription: DocumentNode,
3
  options?: SubscriptionHookOptions<TData, TVariables>,
4
): {
5
  variables: TVariables;
6
  loading: boolean;
7
  data?: TData;
8
  error?: ApolloError;
9
} {}

1
function SomeComponent() {
2
  const client = useApolloClient();
3
  // `client` is now set to the `ApolloClient` instance being used by the
4
  // application (that was configured using something like `ApolloProvider`)
5
}

1
function useApolloClient(): ApolloClient<object> {}

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

1
ReactDOM.render(
2
  <ApolloProvider client={client}>
3
    <MyRootComponent />
4
  </ApolloProvider>,
5
  document.getElementById('root'),
6
);