There are known issues with suspense mode for useQuery:

* only the cache-first fetch policy is supported (#13)
* networkStatus returned by useQuery is undefined (#68)

useMutation

`javascript
import gql from 'graphql-tag';
import { useMutation } from 'react-apollo-hooks';

const TOGGLE_LIKED_PHOTO = gql
mutation toggleLikedPhoto($id: String!) {
toggleLikedPhoto(id: $id) @client
}
;

const DogWithLikes = ({ url, imageId, isLiked }) => {
const [toggleLike, { loading }] = useMutation(TOGGLE_LIKED_PHOTO, {
variables: { id: imageId },
});
return (




{isLiked ? 'Stop liking' : 'like'}


The useMutation returns a tuple with mutation function first and the result of mutation execution in second. It's a similar signature you might know from official Mutation component and the same behavior as well.

You can provide any
mutation options
as an argument to the useMutation hook or to the function returned by it, e.
g.:

`javascript
function AddTaskForm() {
const inputRef = useRef();
const [addTask] = useMutation(ADD_TASK_MUTATION, {
update: (proxy, mutationResult) => {
/ your custom update logic /
},
variables: {
text: inputRef.current.value,
},
});

return (


`javascript
function TasksWithMutation() {
const [toggleTask] = useMutation(TOGGLE_TASK_MUTATION);

return (
onChange={task => toggleTask({ variables: { taskId: task.id } })}
tasks={data.tasks}
/>
);
}
`

useSubscription

If you are just interested in the last subscription value sent by the
server (e. g. a global indicator showing how many new messages you have in an
instant messenger app) you can use useSubscription hook in this form:

`javascript
const NEW_MESSAGES_COUNT_CHANGED_SUBSCRIPTION = gql
subscription onNewMessagesCountChanged($repoFullName: String!) {
newMessagesCount
}
;

const NewMessagesIndicator = () => {
const { data, error, loading } = useSubscription(
NEW_MESSAGES_COUNT_CHANGED_SUBSCRIPTION
);

if (loading) {
return

For more advanced use cases, e. g. when you'd like to show a notification
to the user or modify the Apollo cache (e. g. you'd like to show a new comment
on a blog post page for a user visiting it just after it was created) you can
use the onSubscriptionData callback:

`javascript
const { data, error, loading } = useSubscription(MY_SUBSCRIPTION, {
variables: {
// ...
},
onSubscriptionData: ({ client, subscriptionData }) => {
// Optional callback which provides you access to the new subscription
// data and the Apollo client. You can use methods of the client to update
// the Apollo cache:
// https://www.apollographql.com/docs/react/advanced/caching.html#direct
}
// ... rest options
});
`

In some cases you might want to subscribe only after you have all the information available, eg. only when user has selected necessary filters. Since hooks cannot be used conditionally, it would lead to unnecessary complicated patterns.

Instead, you can use the skip option which turns the subsciption dormant until toggled again. It will also unsubscribe if there was any previous subscription active and throw away previous result.

useApolloClient

`javascript
const MyComponent = () => {
const client = useApolloClient();
// now you have access to the Apollo client
};
`

Testing

An example showing how to test components using react-apollo-hooks:


Server-side rendering

react-apollo-hooks supports server-side rendering with the getMarkupFromTree
function. Example usage:

`javascript
import express from 'express';
import { ApolloProvider, getMarkupFromTree } from 'react-apollo-hooks';
import { renderToString } from 'react-dom/server';

const HELLO_QUERY = gql
query HelloQuery {
hello
}
;

function Hello() {
const { data } = useQuery(HELLO_QUERY);

return

{data.message}

app.get('/', async (req, res) => {
const client = createYourApolloClient();
const renderedHtml = await getMarkupFromTree({
renderFunction: renderToString,
tree: (



),
});
res.send(renderedHtml);
});
`

getMarkupFromTree supports useQuery hooks invoked in both suspense
and non-suspense mode, but the React.Suspense
component is not supported. You can use unstable_SuspenseSSR provided
by this library instead:

`javascript
import { unstable_SuspenseSSR as UnstableSuspenseSSR } from 'react-apollo-hooks';

function MyComponent() {
return (
}>