 Resources from Domitrius Clark in 2021

With the release of `Next.js` v9+, we've been handed the tools to create full-stack react apps with ease. 

This collection will dive into the fundamentals of API & Dynamic routing, handling data from local json and a DB, plus deployment options. 

This collection will be an ongoing collection, where I continue adding more videos over time 😃

Next.js is a minimalistic framework for server-rendered React applications.

NextJS Fundamentals

Quickly learn to use React Query's `useQuery` and `useMutation` hooks. We'll discuss concepts like the `queryCache`, dependent queries, and wire up React Query's custom Devtools component. 

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

Use React Query's hooks to query and mutate data in your React components

We're going to quick dive into how to utilize `useQuery` to fetch some data for us, set up a loading state, and display it in our JSX. We'll also wire up the React Query Devtools and discuss some features. 

Fetch REST data using React Query’s useQuery hook

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Here we will use the `some` Method from a JavaScript  Array to handle throwing an error when we try to create a user object with an email that already exists in an array of users. 

Error handling with the JavaScript Array#some method

Here we'll walk through how to make a query wait until some action is taken to fire. We'll also touch on a few different options that React Query has built in to handle dependent queries.

Use Dependent Queries to delay React Query's useQuery from firing on render

We will be utilizing both `useMutation` and `queryCache` to set up a new favorites list. The `queryCache` will act as a "store" and allow us to use `useMutation` to update values and display a new list of favorites that we created from our characters query.

Use React Query's useMutation and queryCache

One of React Query's biggest strength is it's flexibility when dealing with asynchronous data. We will take a previously REST based app and plug in `graphql-request` to use GraphQL within our `useQuery`

Use GraphQL with React Query's useQuery 

One of the more powerful features of `Nextjs` is how it handles regular and dynamic routing. In this video we will go through how to setup a single basic and dynamic route within the `pages` directory using `Nextjs`'s file routing and render some content. 

Setup Nextjs Routes

When working with data, sometimes you'll find yourself needing to deal with pagination. Usually this can be quite the cumbersome task, but not with `react-query`! It provides you with a hook named `usePaginatedQuery` where we can use things like `resolvedData` that will either resolve to the latest page's data or if fetching a new page, the last successful page's data. We will send a paginated query with Graphql and wire it up to buttons that allow us to switch back and forth between paged data.

Use React Query's usePaginatedQuery

`Nextjs` not only allows us to setup basic and dynamic routes, it also allows us to use a similar pattern for defining API routes. In this video we will setup two API routes, consume the data in our `React` components with `react-query`'s `useQuery` hook.

Utilize API Routes in Nextjs

After setting up some base routes and defining some endpoints, we can use `Nextjs`'s Link component and `useRouter` to link back and forth between your defined routes. We can pass in variables to our dynamic routes and use that to call specific endpoints for our data.

Topics

Instructors

Content Type

Free or Pro

Domitrius Clark