Install graphql-tag to Enable Syntax Highlighting For GraphQL Queries

Set up an Urql GraphQL Provider in React

Query GraphQL Data with Urql using React Hooks

Pass Parameters to urql's useQuery React Hook

Write a GraphQL Mutation using React Hooks with Urql

Set Up GraphQL Subscriptions with Urql

Write a GraphQL Subscription with React Hooks using Urql

Understand Urql's Document Cache Exchange and Request Policies

Introduction to Urql: A React GraphQL Client

We learn about the default `cacheExchange` that urql provides. The default `cacheExchange` is a document cache. Document cache's hash the query and variables as the key as store the result under that key. 

Urql's `cacheExchange` has multiple request policies:
- cache-first
- cache-only
- network-only
- cache-and-network

`cache-first` is the default request policy.

Ian Jones: [00:00] Here we have a React app that uses urql as its GraphQL client. We're passing urql url GraphQL endpoint and then the default exchanges. The order of the exchanges in this array matters. An operation will first go through the dedupExchange, and any duplicate requests will be filtered out.

[00:28] The operation goes through the cacheExchange, and depending on your requestPolicy, the cacheExchange will return a cached value and then pass the operation off to the fetchExchange. The fetchExchange makes the actual request, and then updates the cacheExchange with any resulting data.

[00:52] An urql client has multiple requestPolicies. The default requestPolicy is cache-first. This means that urql will look in its cacheExchange given an operation and if it finds that operation has already fired, it will return the data from the cache and the operation won't be passed to the fetchExchange.

[01:19] To demonstrate this, I'll hop over to my app and open the Developer Tools. I'm on the Network's tab. I go to the Next Page. You see the graphql request fired. When I go to the Previous Page, you don't see another graphql request, because it hits the cache and urql has already loaded this data before, so it doesn't pass this operation over to the fetchExchange.

[01:50] If I go Next, there's no request fired and then Next, urql hasn't seen this request before. It goes and grabs the data.

[02:01] The next request policy is cache-only. Cache-only won't pass the operation over to the fetchExchange no matter what. Right now, I have nothing in the cache, so when I reload, nothing will reload and there will be no requests fired.

[02:25] The next request policy is network-only. As it sounds, this passes each operation through all of the exchanges. When I go Next, you'll see the graphql request down there. I'll clear it. Then we go back, and because of this request policy, urql fires a request.

[02:52] The last request policy is cache-and-network. For this request policy, urql will overturn anything it finds in the cache immediately, and then pass that operation off to the fetchExchange as well. When the fetchExchange finishes its request, it updates the cache. In here, when we go to Next Page and then Previous Page, you'll see this request fired.

[03:27] You would use this request policy if you wanted to present the user with data as fast as possible and then refresh the data when the request finishes.

Course

Introduction to Urql: A React GraphQL Client

Understand Urql's Document Cache Exchange and Request Policies

Share this video with your friends