@apollo/react-hooks

1npm install @apollo/react-hooks

1import { useQuery } from '@apollo/react-hooks';
2import gql from 'graphql-tag';
3
4const GET_GREETING = gql`
5  query getGreeting($language: String!) {
6    greeting(language: $language) {
7      message
8    }
9  }
10`;
11
12function 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}

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

1import { useLazyQuery } from "@apollo/react-hooks";
2import gql from "graphql-tag";
3
4const GET_GREETING = gql`
5  query getGreeting($language: String!) {
6    greeting(language: $language) {
7      message
8    }
9  }
10`;
11
12function 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}

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

1import { useMutation } from '@apollo/react-hooks';
2import gql from 'graphql-tag';
3
4const ADD_TODO = gql`
5  mutation AddTodo($type: String!) {
6    addTodo(type: $type) {
7      id
8      type
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}

1function useMutation<TData = any, TVariables = OperationVariables>(
2  mutation: DocumentNode,
3  options?: MutationHookOptions<TData, TVariables>,
4): MutationTuple<TData, TVariables> {}

1const COMMENTS_SUBSCRIPTION = gql`
2  subscription onCommentAdded($repoFullName: String!) {
3    commentAdded(repoFullName: $repoFullName) {
4      id
5      content
6    }
7  }
8`;
9
10function 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}

1function 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} {}

1function 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}

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