 Resources from Ian Jones in 2021

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

We use the OneGraph Graphiql editor to query GitHub for a repository issue comment. Github requires you to be authenticated before returning data. In this lesson, we log into GitHub through the OneGraph Graphiql editor and query for a GitHub issue.

Write an Authenticated GraphQL Query in OneGraph

In this lesson, we send a github graphql query using `urql`. We have to set up `onegraph-auth` so that we can pass our github authentication token in our request headers. 

`Urql`'s `createClient` function takes a `fetchOptions` parameter. This is how we can set any of the headers on our requests that `urql` sends.

Query Github Comments with OneGraph through urql's Client in React

We take the data from our `useQuery` result and display it in an unordered list element. 

We need to make sure to return a loading indicator when `result.data` is undefined. When `result.data` is truthy, we know that the GraphQL request has returned the data we asked for.

Display GraphQL Data with a React Component

In this lesson, we use OneGraph's Graphiql editor to create a GraphQL mutation. This is how we can create a comment on a GitHub issue through the editor. 

Use a GraphQL Mutation to Create a Github Issue Comment

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

In this lesson, we style our list component so that we can see who wrote the message and visually distinguish the current viewers messages from other peoples.

Style a React List Component 

In this lesson, we create an `input` component so that the user can create comments by typing into an input.

We create a GraphQL mutation with urql's `useMutation` hook. We pass the mutation query to the hook. The hook returns a function that we can pass to our input to fire when the user submits the form.


Use urqls useMutation to Create Github Issues in a React App

In this lesson, we write a GraphQL subscription query to subscribe to comment events on a GitHub issue in the OneGraph Graphiql editor.



Write a GraphQL Subscription Query in the Graphiql Editor

Generally, you want to keep your view components separate from components that fetch data.

In this lesson, we extract the view portion from our Comments component. Into another component so that we can use the same view later in the course with two separate ways of fetching comments.

Extract a React View Component From a CommentQuery Component

Cascading Style Sheets bring order and beauty to our applications.

In this lesson, we style our list component so that we can see the other users' user name. We use the `style` prop on our inputs to pass JavaScript objects to define our list styles.

Style a React Input Component with CSS-in-JS

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](https://egghead.io/lessons/graphql-write-a-graphql-subscription-query-in-the-graphiql-editor?pl=react-real-time-messaging-with-graphql-using-urql-and-onegraph-be5a) and use it with Urql's `useSubscription` hook to access the data in our app. 

Write a Subscription GraphQL Query in React with urql

Now that Subscriptions are working within our app, you'll notice that we are receiving individual comments from the Subscription stream that are overwriting each other.

We want all the comments that come in! To handle this, we'll write a `handleSubscription` function that will reduce all the comments coming in into an array that we can render in the app.

Reduce a GraphQL Subscription Stream into a Collection with urql

Now that we have multiple comments coming in, we'll need to let every user connect to the OneGraph GitHub subscription. Not just the admin. 

OneGraph has an option to allow subscriptions to non-admins for just this case.

Display GraphQL Subscription Results in a React UI

Subscriptions are great. They allow data to come into your app without having to refresh any pages. However, they don't allow query for any data that was previously there.

We will have to combine a GraphQL Query with a Subscription to get the initial data as well as the data that comes in.

Use a GraphQL Query and Subscription Together to Fetch the History and Current Comments

We refactor `APP_ID` and `CLIENT_URL` out of the `index.js` file to prepare our application to share these variables across multiple files.

Refactor Commonly Used Variables Into a Utils File to Be Shared Across Our React App

In this lesson we install `onegraph-auth` and pass our application id to the auth object.

Install and Create an OneGraph Authentication Object Within a React Application

In this lesson, we go over the `AuthProvider` component that will provide the `onegraph-auth` object everywhere in our React application. 

This component will contain 2 `React.useEffects`. One will watch `[props.auth, props.appId]` and create an auth object if `props.auth` does not exist.

The next `useEffect` will set the `headers` and `status` in our local state. These are the headers our React application will use to authenticate requests to OneGraph.

Finally, we have our `login` and `logout` buttons that call `auth.login` and `auth.logout` respectively. These are the functions we call to log our users in through OneGraph OAuth.

We pass all our local state and our `login` `logout` functions to the `AuthContext.Provider` that we've created.

Create an AuthProvider Component for Our React Application to Use Through React Context

We wrap our app in `src/index.js` file with the `AuthProvider` component. Then we call `React.useContext` in our `App` component to grab the `login` and `status` in our `AuthContext`.

`status` will be an object where the keys in the object will be the services that the user is logged into. So, we can check `status.github` to check if the user is logged into GitHub.

If the user isn't logged into GitHub, we display JSX with a prompt to log in. We create a `button` component where the `onClick` handler calls our `login` function with the string of `'github'` passed in.

Wrap Our React Application in an AuthProvider Component

In this lesson, we take the `authHeaders` from our `onegraph-auth` object and pass them to urql. `auth.authHeaders()` is a function that returns `{authorization: 'Bearer token-guid'}`.

We do so by using the `fetchOptions` key when creating our urql client in `src/index.js`.

Pass Authorization Headers to Our Requests in React Through urql's fetchOptions

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

vscode

Dendron is a Visual Studio Code extension that you can download and install free of charge.

To download a visual studio code extension, we press Command + Shift + P on the Mac. Then you type: install extensions. Search for Dendron and download all the related plugins.

To initialize a Dendron Workspace, we use Command + Shift + P and type `Dendron: initialize workspace`.

This activates the extension and creates the minimum amount of Dendron files we need to get started.

Download and Install a Dendron Workspace

In this lesson, we take a look at the keyboard shortcuts that Dendron provides us to navigate our hierarchy of notes.

Heres a quick cheat sheet:

- `CMD+SHIFT+ down arrow`: navigate down into your hierarchy
- `CMD+SHIFT+ up arrow`: navigate up your hierarchy
- `CTRL+SHIFT+ [`: navigate over your sibling notes
- `CTRL + SHIFT+ ]`: navigate over sibling notes the other way

Topics

Instructors

Content Type