Write a GraphQL Subscription with React Hooks using Urql

Watch "Write a GraphQL Subscription with React Hooks using Urql" (community resource) on egghead.

Urql provides a useSubscription hook for us to subscribe to a GraphQL subscription. The first thing we need to do is import {useSubscription} from 'urql'.

useSubscription takes an object, like useQuery this object expects a property of query and variables to be defined on it. In our particularly query, we are subscribing to the comments on a course. So we need to pass the slug of the course to our subscription query.

function App(){ const course_slug = 'usesubscription-example' useSubscription({ query: commentSubscriptionQuery, variables: {course_slug} }) return ( // ... ) } 

Heres what our subscription query looks like:

const commentSubscriptionQuery = ` subscription subscribeToComments($course_slug: String!) { comments(where: {course_slug: {_eq: $course_slug}}){ text } }` 

useSubscription returns an array with the first element in that array being the result: const [result] = useSubscription({})

Like the the result of useQuery, this result has a couple methods on it that are useful to use.
We can use result.error to display any errors that the my have ran into.

const commentSubscriptionQuery = ` subscription subscribeToComments($course_slug: String!) { comments(where: {course_slug: {_eq: $course_slug}}){ text } } ` function App(){ const course_slug = 'usesubscription-example' const [result] useSubscription({ query: commentSubscriptionQuery, variables: {course_slug} }) if (result.error !== undefined) { return <div>{res.error.message}</div>  } return ( // ... ) } 

Next, we need to tell the user if the query is fetching or if the data hasn't arrived yet.

function App(){ // ... if (!res.fetching && res.data === undefined) { return <p>Loading...</p>  } return (//...) 

If result passes all of these checks, we know that we have result.data.comments and we can display them in a list.