Write a Subscription GraphQL Query in React with urql
In this lesson, we'll set up Subscription Exchanges in our Urql client and forward the SubscriptionClient that OneGraph gives us.
Once the Exchange is set up, we can bring over the Subscription query that was built in Write a GraphQL Subscription Query in the Graphiql Editor and use it with Urql's useSubscription hook to access the data in our app.
Instructor: [0:00] Now, let's get subscriptions working inside of our React application. The first thing we need to do is yarn add onegraph-subscription-client. Next, inside of our index.js, let's import {SubscriptionClient} from 'onegraph-subscription-client'.
[0:29] Then, we can instantiate a subscriptionClient, so subscriptionClient = new SubscriptionClient. The first is the AppId, so AppId. You can see the VS Code auto-imported {AppId} from 'auth'. The next parameter is an object, and this is where we will pass our OneGraph Auth. We'll pass our Auth object.
[1:07] The next thing we need to do is import default exchanges. These are the exchanges that URQL implements for us. The next thing we'll import is subscription exchange down in our create client. We will call exchanges, which is an array.
[1:28] We'll spread default exchanges and then next subscription exchange, which is a function that takes an object with forward subscription. Forward subscription expects a function, and this function will pass you the operation that is flowing through URQL.
[1:54] What we want to do with this operation is we want to call subscriptionclient.request and pass the operation to the subscription client. Now, let's touchsource/components/commentssubscription.js.
[2:23] We'll open that file commentssubscription, we'll import React from React called function commentssubscription. We'll make sure to export default comments subscription. Then we will import useSubscription from URQL.
[2:59] Now that we have our function, I'm going to create a variable for out queries, so const comments list subscription. I'll paste it in and let's rename it to comments list subscription. Now that we have our query, we need to call useSubscription and pass in repo name and repo owner.
[3:26] In our function we will go const useSubscription will give us the comment subscription result = useSubscription. It's just like useQuery, so it takes a query. We'll use our comments list query. Then it takes variables and we will pass it repo name which is egghead GraphQL subscriptions and then repo owner, which is D. Ian Jones.
[4:14] For now, we will return null and we will console.log.comment subscription result. Inside of our app, instead of importing comments, we're going to import comment subscription. Let's go over to our app and you can see that no comments are loading.
[4:44] That's because we just exchanged our comments query for a comment subscription. One big difference is that a subscription will give you data as it happens. It won't back fill history. I'll open the DevTools. I'll go to console.
[5:06] You can see that we're getting fetching is true and that's because a subscription is always listening. It's listening over web sockets. When I go, you can see I got the mutation results which is from the actual mutation that we just fired here, and then a subscription result. We have data GitHub issues and our comment.