Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

In this playlist, we are going to go over how to set up and use urql as a GraphQL client. 

You will learn how to set up an Urql `Provider` component so that all of your React components have access to urql. Then you will learn how to use 3 of urql's React Hooks:

- useQuery
- useMutation
- useSubscription

Each of these lessons covers their corresponding GraphQL topic: Queries, Mutations, and Subscription.

In this lesson, we are going to install `graphql-tag` to enable syntax highlighting to our [GraphQL query](https://egghead.io/courses/graphql-query-language). `graphql-tag` parses your query and stores it as an AST. `graphql-tag` caches the parsed query, so it won't have to parse it multiple times. 

Install graphql-tag to Enable Syntax Highlighting For GraphQL Queries

In this lesson, we create an urql client with the `createClient` method. Once we provide the `createClient` our GraphQL endpoint, we pass the client to urql's `Provider` component so that the urql can be used in our application.

Set up an Urql GraphQL Provider in React

We use `urql`'s `useQuery` to fetch data from a `GraphQL` endpoint. We look the `result` of the query, which gives us access to the queries status. 

`result.fetching` will be true while the query is running. `result.error` will contain an error if the query returned an error. `result.data` will contain the data of our query to display to our user.
 

Query GraphQL Data with Urql using React Hooks

When you fetch data, you often want more than what a static query can give you.

In this lesson, we pass use `useQuery`'s configuration object to pass variables into our GraphQL Query. 

Urql will execute the same query with new variables whenever it detects that one of the variables it is passing to Graphql has changed.

Pass Parameters to urql's useQuery React Hook

We look at how to use `useMutation` from urql to run a GraphQL mutation query. 

`useMutation` accepts a Graphql mutation as a string and passes the result and function to execute the query back in an array. This function can be called as many times as you like, passing variables the GraphQL query has defined.

Write a GraphQL Mutation using React Hooks with Urql

In this lesson, we set up our `urql` client with GraphQL subscriptions. 

`Urql` doesn't support subscriptions by default. We import the `subscriptionExchange` along with `defaultExchanges` to pass to our `urql` client. Next, we import `SubscriptionClient` from `subscriptions-transport-ws` which takes a websocket URL.

Set Up GraphQL Subscriptions with Urql

In this lesson, we use urql's `useSubscription` hook to subscribe to a GraphQL subscription. 

We write a GraphQL subscription query and pass it to `useSubscritpion` which returns the result of the subscription we pass it. 

Write a GraphQL Subscription with React Hooks using Urql

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.

Introduction to Urql: A React GraphQL Client

Ian Jones

Course Content