Forem: Pedro Henrique Machado

TanStack React Query: Crash Course

Pedro Henrique Machado — Sat, 18 Jan 2025 16:50:22 +0000

React Query, now known as TanStack React Query, is a powerful data-fetching and state management library for React applications. It simplifies the process of fetching, caching, synchronizing, and updating server state, making your React apps more efficient and easier to manage. In this guide, we'll walk through everything you need to know about React Query, from setup to advanced features like mutations and optimistic updates.

Prefer watching? Check out my tutorial:

Introduction to React Query
What is TanStack React Query?
Setting Up Your Project
Installing React Query Library
Configuring Query Client Provider
Fetching Data from an API
Using the useQuery Hook
Handling Loading and Error States
Understanding Caching in React Query
Fetching Data by ID Example
Introduction to Mutations
Creating a Post with React Query
Handling Post Creation Success
Implementing Optimistic Updates
Conclusion and Next Steps

Introduction to React Query

React Query is a library that manages server state in React applications. Unlike client state, which is typically managed with tools like Redux or the Context API, server state involves asynchronous data fetching, caching, synchronization, and more. React Query abstracts these complexities, allowing developers to focus on building features rather than managing data flows.

Key Benefits:

Simplifies data fetching and caching
Provides built-in support for background updates and refetching
Handles complex scenarios like pagination and infinite scrolling
Improves performance by minimizing unnecessary re-renders

What is TanStack React Query?

TanStack React Query is the latest iteration of React Query, maintained by Tanner Linsley and the open-source community. It extends the capabilities of the original React Query library, offering enhanced features and better performance. The name change to TanStack reflects the broader scope of the library beyond just React, although React remains its primary focus.

Core Features:

Declarative Data Fetching: Use hooks like useQuery and useMutation to declaratively fetch and mutate data.
Caching: Intelligent caching mechanisms to reduce redundant network requests.
Background Updates: Automatically refetch data in the background to keep the UI fresh.
Devtools: Powerful developer tools for debugging and optimizing queries.

Setting Up Your Project

Before diving into React Query, ensure you have a React project set up. You can create a new project using Create React App or any other preferred setup.

npx create-react-app react-query-tutorial
cd react-query-tutorial

Installing React Query Library

Install the React Query library along with its devtools for enhanced debugging.

npm install @tanstack/react-query
npm install @tanstack/react-query-devtools

Alternatively, using Yarn:

yarn add @tanstack/react-query
yarn add @tanstack/react-query-devtools

Configuring Query Client Provider

React Query requires a QueryClient and a QueryClientProvider to be set up at the root of your application. This setup provides the necessary context for all React Query hooks to function.

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Explanation:

QueryClient: Manages the cache and configurations.
QueryClientProvider: Provides the QueryClient to the React component tree.
ReactQueryDevtools: Optional devtools for inspecting queries.

Fetching Data from an API

Let's fetch data from a public API. We'll use the JSONPlaceholder API for demonstration.

Example: Fetching a List of Posts

src/App.js

import React from 'react';
import { useQuery } from '@tanstack/react-query';

const fetchPosts = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function App() {
  const { data, error, isLoading } = useQuery(['posts'], fetchPosts);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>
            <strong>{post.title}</strong>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Explanation:

useQuery Hook: Fetches data and manages loading and error states.
Query Key: ['posts'] uniquely identifies the query.
Fetch Function: fetchPosts fetches data from the API.

Using the `useQuery` Hook

The useQuery hook is central to React Query. It handles fetching, caching, and updating data.

Syntax:

const { data, error, isLoading, isError, refetch } = useQuery(queryKey, queryFn, options);

Parameters:

queryKey: A unique key for the query, can be a string or an array.
queryFn: The function that fetches the data.
options: Configuration options for the query.

Example:

const { data, error, isLoading } = useQuery(['user', userId], () => fetchUser(userId));

Handling Loading and Error States

React Query provides boolean flags to handle different states of a query.

Common Flags:

isLoading: Indicates if the query is in a loading state.
isError: Indicates if the query encountered an error.
error: Contains the error object if isError is true.
isSuccess: Indicates if the query was successful.

Example:

if (isLoading) {
  return <div>Loading...</div>;
}

if (isError) {
  return <div>Error: {error.message}</div>;
}

return <div>Data loaded successfully!</div>;

Understanding Caching in React Query

Caching is one of the standout features of React Query. It stores fetched data, reducing the need for repeated network requests.

Key Concepts:

Stale Time (staleTime): Duration for which the cached data is considered fresh.
Cache Time (cacheTime): Duration for which unused cached data remains in memory.
Query Invalidation: Mechanism to mark cached data as stale.

Example:

useQuery(['posts'], fetchPosts, {
  staleTime: 1000 * 60 * 5, // 5 minutes
  cacheTime: 1000 * 60 * 10, // 10 minutes
});

Explanation:

Data is fresh for 5 minutes. Within this period, React Query will not refetch the data.
Cached data remains for 10 minutes after it's no longer used.

Fetching Data by ID Example

Fetching individual items by ID is a common pattern. React Query handles it efficiently by using dynamic query keys.

Example: Fetching a Single Post

import React from 'react';
import { useQuery } from '@tanstack/react-query';

const fetchPostById = async (postId) => {
  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function Post({ postId }) {
  const { data, error, isLoading } = useQuery(['post', postId], () => fetchPostById(postId));

  if (isLoading) return <div>Loading post...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h2>{data.title}</h2>
      <p>{data.body}</p>
    </div>
  );
}

export default Post;

Explanation:

The query key ['post', postId] ensures each post has a unique cache entry.
Changing postId triggers a new fetch for the corresponding post.

Introduction to Mutations

While useQuery handles data fetching, mutations manage data updates like creating, updating, or deleting records. React Query provides the useMutation hook for this purpose.

Key Features:

Handles asynchronous operations.
Manages loading and error states for mutations.
Supports optimistic updates for better UX.

Creating a Post with React Query

Let's create a new post using the useMutation hook.

Example: Creating a New Post

import React, { useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';

const createPost = async (newPost) => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(newPost),
  });
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function CreatePost() {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const queryClient = useQueryClient();

  const mutation = useMutation(createPost, {
    onSuccess: () => {
      // Invalidate and refetch
      queryClient.invalidateQueries(['posts']);
    },
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    mutation.mutate({ title, body });
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Create New Post</h2>
      <div>
        <label>Title:</label>
        <input value={title} onChange={e => setTitle(e.target.value)} required />
      </div>
      <div>
        <label>Body:</label>
        <textarea value={body} onChange={e => setBody(e.target.value)} required />
      </div>
      <button type="submit">Create</button>
      {mutation.isLoading && <p>Creating post...</p>}
      {mutation.isError && <p>Error: {mutation.error.message}</p>}
      {mutation.isSuccess && <p>Post created!</p>}
    </form>
  );
}

export default CreatePost;

Explanation:

useMutation Hook: Handles the post creation process.
onSuccess Callback: Invalidates the ['posts'] query to refetch the updated list.
Form Handling: Captures user input and triggers the mutation on form submission.

Handling Post Creation Success

After successfully creating a post, it's essential to update the UI to reflect the new data. React Query facilitates this through query invalidation and refetching.

Steps:

Invalidate Queries: Marks specific queries as stale.
Refetch Data: Automatically refetches the invalidated queries to update the cache.

Example:

const mutation = useMutation(createPost, {
  onSuccess: () => {
    // Invalidate the 'posts' query to refetch the posts
    queryClient.invalidateQueries(['posts']);
  },
});

Benefits:

Ensures the UI displays the latest data.
Maintains consistency between the client and server states.

Implementing Optimistic Updates

Optimistic updates enhance user experience by immediately reflecting changes in the UI before the server confirms them. React Query supports this feature, allowing for snappy and responsive interfaces.

Example: Optimistic Update on Post Creation

const mutation = useMutation(createPost, {
  onMutate: async (newPost) => {
    await queryClient.cancelQueries(['posts']);

    const previousPosts = queryClient.getQueryData(['posts']);

    queryClient.setQueryData(['posts'], old => [...old, { id: Date.now(), ...newPost }]);

    return { previousPosts };
  },
  onError: (err, newPost, context) => {
    queryClient.setQueryData(['posts'], context.previousPosts);
  },
  onSettled: () => {
    queryClient.invalidateQueries(['posts']);
  },
});

Explanation:

onMutate: Called before the mutation function. Cancels any ongoing queries and updates the cache optimistically.
onError: Reverts the cache to its previous state if the mutation fails.
onSettled: Invalidates the query to ensure data consistency.

Benefits:

Provides immediate feedback to users.
Enhances perceived performance.

Conclusion and Next Steps

React Query (TanStack React Query) is a robust library that simplifies data fetching and state management in React applications. By leveraging features like caching, background updates, and mutations, developers can build efficient and responsive interfaces with ease.

Next Steps:

Explore Pagination and Infinite Queries: Handle large datasets and infinite scrolling.
Advanced Caching Strategies: Customize caching behaviors to suit your application's needs.
Server-Side Rendering (SSR): Integrate React Query with frameworks like Next.js for SSR support.
Authentication and Authorization: Manage authenticated requests and secure data fetching.

By mastering React Query, you'll be well-equipped to handle complex data scenarios and build scalable React applications.

Resources:

Fetch Data With RTK Query: Crash Course

Pedro Henrique Machado — Fri, 10 Jan 2025 17:27:14 +0000

Welcome to this comprehensive tutorial on RTK Query and how to use it with the JSON Placeholder API in a React application. Whether you're a beginner or an experienced developer, this guide will teach you how to efficiently fetch and mutate data using RTK Query's powerful caching and refetching capabilities.

Prefer watching? Check out my tutorial:

Setting Up the Project
Creating an API Slice
Fetching Data with Queries
Creating Data with Mutations
Caching and Optimizing Fetch Requests
Manually Refetching Data
Configuring the Redux Store
Using the Data in React Components
Conclusion

1. Setting Up the Project

To get started, we need to set up a React project with the necessary dependencies.

Steps to Set Up

Create a New React Project:

   npx create-react-app rtk-query-example

Navigate to the Project Directory:

   cd rtk-query-example

Install Redux Toolkit and React-Redux:

   npm install @reduxjs/toolkit react-redux

Start the Application:

   npm start

Once you've followed these steps, you should have a running React project.

2. Creating an API Slice

The first step in using RTK Query is to create an API slice, which defines how to fetch data from a backend.

Define the API Slice

Create a file named api.js and define the API slice:

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const jsonPlaceholderApi = createApi({
  reducerPath: "jsonPlaceholderApi",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://jsonplaceholder.typicode.com",
  }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => "posts",
    }),
    createPost: builder.mutation({
      query: (newPost) => ({
        url: "posts",
        method: "POST",
        body: newPost,
      }),
    }),
  }),
});

export const { useGetPostsQuery, useCreatePostMutation } = jsonPlaceholderApi;

This API slice includes:

getPosts: A query to fetch a list of posts.
createPost: A mutation to create a new post.

3. Fetching Data with Queries

RTK Query provides hooks for fetching data from the defined endpoints.

Using the `useGetPostsQuery` Hook

In your component, use the useGetPostsQuery hook to fetch the list of posts:

import React from "react";
import { useGetPostsQuery } from "./api";

function Posts() {
  const { data, error, isLoading } = useGetPostsQuery();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default Posts;

The useGetPostsQuery hook automatically fetches data when the component mounts and provides data, error, and isLoading states to manage the UI.

4. Creating Data with Mutations

In addition to fetching data, RTK Query also supports mutations to create, update, or delete data.

Using the `useCreatePostMutation` Hook

Create a form that allows the user to submit new posts:

import React, { useState } from "react";
import { useCreatePostMutation } from "./api";

function CreatePost() {
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const [createPost, { isLoading }] = useCreatePostMutation();

  const handleSubmit = async (e) => {
    e.preventDefault();
    await createPost({ title, body });
  };

  return (
    <div>
      <h1>Create a New Post</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Title"
        />
        <textarea
          value={body}
          onChange={(e) => setBody(e.target.value)}
          placeholder="Body"
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? "Creating..." : "Create Post"}
        </button>
      </form>
    </div>
  );
}

export default CreatePost;

Here, useCreatePostMutation is used to send the new post data to the API.

5. Caching and Optimizing Fetch Requests

RTK Query caches the data it fetches. If the same data is requested again, it will serve the cached data, avoiding a new network request.

You can configure the cache behavior using the keepUnusedDataFor option to determine how long data should remain in the cache after it's no longer needed.

Example of configuring cache lifetime in the API slice:

export const jsonPlaceholderApi = createApi({
  reducerPath: "jsonPlaceholderApi",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://jsonplaceholder.typicode.com",
  }),
  keepUnusedDataFor: 30, // Data will be removed after 30 seconds of inactivity
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => "posts",
    }),
    createPost: builder.mutation({
      query: (newPost) => ({
        url: "posts",
        method: "POST",
        body: newPost,
      }),
    }),
  }),
});

6. Manually Refetching Data

You may need to manually trigger a refetch of data, especially after performing a mutation or when data is out of date.

Force Refetching Data

import { useDispatch } from "react-redux";
import { useGetPostsQuery } from "./api";

function RefreshButton() {
  const dispatch = useDispatch();
  const { refetch } = useGetPostsQuery();

  return <button onClick={() => refetch()}>Refresh Data</button>;
}

This button will manually trigger a refetch of the data from the API.

7. Configuring the Redux Store

To use RTK Query, you need to add the API slice reducer and middleware to your Redux store.

Setting Up Redux Store

import { configureStore } from "@reduxjs/toolkit";
import { jsonPlaceholderApi } from "./api";

const store = configureStore({
  reducer: {
    [jsonPlaceholderApi.reducerPath]: jsonPlaceholderApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(jsonPlaceholderApi.middleware),
});

export default store;

Make sure to wrap your application with the Provider component from react-redux and pass in the store.

8. Using the Data in React Components

Now that everything is set up, you can use the hooks and store to fetch and mutate data across your components.

Example of using the Posts and CreatePost components:

import React from "react";
import Posts from "./Posts";
import CreatePost from "./CreatePost";

function App() {
  return (
    <div>
      <h1>RTK Query Example</h1>
      <CreatePost />
      <Posts />
    </div>
  );
}

export default App;

9. Conclusion

By following this tutorial, you've learned how to integrate RTK Query with the JSON Placeholder API in your React application. You've covered how to fetch data using queries, create data using mutations, configure caching, manually refetch data, and set up the Redux store.

RTK Query simplifies the process of managing API requests in React applications, allowing you to focus on building great user experiences.

For more tutorials and guides, be sure to subscribe to my YouTube channel Pedrotechnologies.

React Router V7: A Crash Course

Pedro Henrique Machado — Fri, 10 Jan 2025 17:22:40 +0000

Mastering React Router v7: A Comprehensive Step-by-Step Tutorial

Welcome to this comprehensive guide on leveraging React Router v7 as a full-fledged framework for building modern, data-driven React applications. Whether you're a beginner aiming to understand the fundamentals or an experienced developer looking to deepen your knowledge, this tutorial covers everything you need to know. We'll walk through each topic step-by-step, complete with insightful explanations and practical code examples.

Prefer watching? Check out this in video form:

Installation
Routing
Route Module
Rendering Strategies
Data Loading
Actions
Navigating
Pending UI
Testing
Custom Framework

1. Installation

Setting up your React Router v7 project correctly from the start can save you time and headaches later. Most projects begin with a template that provides a solid foundation, including project structure, essential configurations, and helpful scripts.

Steps to Install React Router v7

Create a New Project with the React Router Template:

   npx create-react-router@latest my-react-router-app

Navigate to the Project Directory and Install Dependencies:

   cd my-react-router-app
   npm install
   npm run dev

View the Application:

Open your browser and navigate to http://localhost:5173 to see your running app.

Additional Setup

GitHub Repository:

You can view the template's GitHub repository to understand its structure and manually set up your project if needed.
Deployment Templates:

Explore various deployment-ready templates provided by React Router to deploy your app seamlessly to your preferred hosting service.

2. Routing

Routing is the backbone of any single-page application (SPA). React Router v7 allows you to define routes that map URLs to components, enabling dynamic content rendering based on the user's navigation.

Configuring Routes

Routes are defined in the app/routes.ts file. Each route requires two main parts:

URL Pattern: The path segment that matches the URL.
Route Module: The file that contains the route's logic and UI.

Basic Route Configuration

import { type RouteConfig, route } from "@react-router/dev/routes";

export default [
  route("some/path", "./some/file.tsx"),
  // pattern ^           ^ module file
] satisfies RouteConfig;

Advanced Route Configuration

You can create more complex routing structures using nested routes, layouts, and prefixes.

import {
  type RouteConfig,
  route,
  index,
  layout,
  prefix,
} from "@react-router/dev/routes";

export default [
  index("./home.tsx"),
  route("about", "./about.tsx"),

  layout("./auth/layout.tsx", [
    route("login", "./auth/login.tsx"),
    route("register", "./auth/register.tsx"),
  ]),

  ...prefix("concerts", [
    index("./concerts/home.tsx"),
    route(":city", "./concerts/city.tsx"),
    route("trending", "./concerts/trending.tsx"),
  ]),
] satisfies RouteConfig;

index: Defines a default child route.
layout: Creates a nested layout without adding to the URL.
prefix: Adds a common path prefix to a group of routes.

File System Routing (Optional)

If you prefer defining routes based on your file system's structure, use the @react-router/fs-routes package. This allows for automatic route generation based on your directory and file naming conventions.

3. Route Module

A Route Module is a file that defines the behavior and UI for a specific route. It can contain:

Loader Functions: For fetching data before rendering.
Action Functions: For handling data mutations like form submissions.
Default Exported Components: The UI to render when the route matches.

Example Route Module

// app/routes/team.tsx
import type { Route } from "./+types/team";

export async function loader({ params }: Route.LoaderArgs) {
  let team = await fetchTeam(params.teamId);
  return { name: team.name };
}

export default function Team({ loaderData }: Route.ComponentProps) {
  return <h1>{loaderData.name}</h1>;
}

Nested Routes

Routes can be nested to create complex layouts. The parent route renders an <Outlet /> where child routes will appear.

// app/routes/dashboard.tsx
import { Outlet } from "react-router";

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      {/* Child routes render here */}
      <Outlet />
    </div>
  );
}

// app/routes.ts
export default [
  route("dashboard", "./dashboard.tsx", [
    index("./home.tsx"),
    route("settings", "./settings.tsx"),
  ]),
] satisfies RouteConfig;

Root Route

Every route defined in routes.ts is nested inside the special app/root.tsx module. This root route can provide global layouts, context providers, or error boundaries.

4. Rendering Strategies

React Router v7 supports various rendering strategies to cater to different application needs and deployment environments.

1. Client Side Rendering (CSR)

CSR renders all routes in the browser. This is ideal for Single Page Applications (SPAs) where the server only serves static assets.

// react-router.config.ts
import type { Config } from "@react-router/dev/config";

export default {
  ssr: false,
} satisfies Config;

Benefits:

Simpler setup without needing a server for rendering.
Faster client-side transitions once the app is loaded.

2. Server Side Rendering (SSR)

SSR renders routes on the server, sending fully populated HTML to the client. This enhances SEO and reduces initial load times.

// react-router.config.ts
import type { Config } from "@react-router/dev/config";

export default {
  ssr: true,
} satisfies Config;

Benefits:

Improved SEO as search engines can index fully rendered HTML.
Faster initial load times since the client receives fully rendered pages.
Better performance on slow devices as the server does the heavy lifting.

Note: SSR requires a server environment that supports rendering React components on the server.

3. Static Pre-rendering

Static Pre-rendering generates static HTML files for specified routes at build time. This is excellent for deploying to static hosting services and improving performance and SEO.

// react-router.config.ts
import type { Config } from "@react-router/dev/config";

export default {
  async prerender() {
    return ["/", "/about", "/contact"];
  },
} satisfies Config;

Benefits:

Combines the performance benefits of static sites with the flexibility of React.
Ideal for pages that don't change frequently.
Simplifies deployment as it can be hosted on any static file server or CDN.

Combining Strategies

You can mix rendering strategies within the same application. For example, statically pre-render some routes while server-rendering others.

5. Data Loading

Efficient data management is crucial for building responsive and dynamic applications. React Router v7 provides powerful data loading capabilities through loaders and clientLoaders.

Loader Functions

Loader Functions fetch data before a route renders. They run on the server during SSR or on the client during navigation.

// app/routes/product.tsx
import type { Route } from "./+types/product";

export async function loader({ params }: Route.LoaderArgs) {
  const res = await fetch(`/api/products/${params.pid}`);
  if (!res.ok) throw new Response("Not Found", { status: 404 });
  return res.json();
}

export default function Product({ loaderData }: Route.ComponentProps) {
  const { name, description } = loaderData;
  return (
    <div>
      <h1>{name}</h1>
      <p>{description}</p>
    </div>
  );
}

Client Loader

clientLoader fetches data exclusively on the client side. This is useful for client-only data fetching scenarios.

// app/routes/clientProduct.tsx
import type { Route } from "./+types/product";

export async function clientLoader({ params }: Route.ClientLoaderArgs) {
  const res = await fetch(`/api/products/${params.pid}`);
  return res.json();
}

export default function ClientProduct({ loaderData }: Route.ComponentProps) {
  const { name, description } = loaderData;
  return (
    <div>
      <h1>{name}</h1>
      <p>{description}</p>
    </div>
  );
}

Combining Loaders

You can use both loader and clientLoader in the same route. The loader handles SSR or pre-rendering, while clientLoader manages client-side data fetching for subsequent navigations.

6. Actions

Actions handle data mutations like creating, updating, or deleting resources. They work in tandem with forms to process user input and update the application state.

Types of Actions

Server Actions (action): Run on the server and are not included in client bundles.
Client Actions (clientAction): Run exclusively in the browser, ideal for client-side only data mutations.

Client Action Example

// app/routes/updateProject.tsx
import { Form, redirect } from "react-router";
import type { Route } from "./+types/project";

export async function clientAction({ request }: Route.ClientActionArgs) {
  const formData = await request.formData();
  const title = formData.get("title");

  const res = await fetch(`/api/projects/${formData.get("projectId")}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title }),
  });

  if (!res.ok) {
    return { success: false, message: "Failed to update project." };
  }

  return { success: true };
}

export default function UpdateProject({ loaderData }: Route.ComponentProps) {
  return (
    <Form method="post">
      <input type="hidden" name="projectId" value={loaderData.id} />
      <label>
        Project Title:
        <input type="text" name="title" defaultValue={loaderData.title} />
      </label>
      <button type="submit">Update</button>
    </Form>
  );
}

Server Action Example

// app/routes/deleteProject.tsx
import { redirect } from "react-router";
import type { Route } from "./+types/project";

export async function action({ params }: Route.ActionArgs) {
  const res = await fetch(`/api/projects/${params.projectId}`, {
    method: "DELETE",
  });

  if (!res.ok) {
    throw new Response("Failed to delete project.", { status: 500 });
  }

  return redirect("/projects");
}

export default function DeleteProject() {
  // This component can remain empty as the action handles the redirection
  return null;
}

Calling Actions

Using <Form>:

  <Form method="post" action="/projects/123/delete">
    <button type="submit">Delete Project</button>
  </Form>

Using useSubmit():

  import { useSubmit } from "react-router";

  function DeleteButton({ projectId }) {
    const submit = useSubmit();

    const handleDelete = () => {
      submit(null, { method: "post", action: `/projects/${projectId}/delete` });
    };

    return <button onClick={handleDelete}>Delete Project</button>;
  }

Using <fetcher.Form>:

  import { useFetcher } from "react-router";

  function DeleteProject({ projectId }) {
    const fetcher = useFetcher();

    return (
      <fetcher.Form method="post" action={`/projects/${projectId}/delete`}>
        <button type="submit">Delete Project</button>
      </fetcher.Form>
    );
  }

7. Navigating

Effective navigation is essential for a seamless user experience. React Router v7 offers several components and hooks to manage navigation within your application.

1. `<Link>`

Use <Link> for simple, unstyled navigation between routes.

import { Link } from "react-router";

export function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link to="/about">Go to About Page</Link>
    </div>
  );
}

2. `<NavLink>`

<NavLink> is similar to <Link> but provides styling capabilities based on the active route.

import { NavLink } from "react-router";

export function Navbar() {
  return (
    <nav>
      <NavLink
        to="/"
        end
        className={({ isActive }) => (isActive ? "active" : "")}
      >
        Home
      </NavLink>
      <NavLink
        to="/about"
        className={({ isActive }) => (isActive ? "active" : "")}
      >
        About
      </NavLink>
    </nav>
  );
}

Styling Active Links:

/* styles.css */
.active {
  font-weight: bold;
  color: blue;
}

3. `<Form>`

Forms can navigate and mutate data based on user input.

import { Form } from "react-router";

export function SearchForm() {
  return (
    <Form method="get" action="/search">
      <input type="text" name="q" placeholder="Search..." />
      <button type="submit">Search</button>
    </Form>
  );
}

4. `redirect`

Use redirect within loaders or actions to programmatically navigate the user.

import { redirect } from "react-router";

export async function loader({ request }: Route.LoaderArgs) {
  const user = await getUser(request);
  if (!user) {
    return redirect("/login");
  }
  return { userName: user.name };
}

5. `useNavigate()`

useNavigate is a hook that allows for imperative navigation within your components.

import { useNavigate } from "react-router";

export function LogoutButton() {
  const navigate = useNavigate();

  const handleLogout = () => {
    performLogout();
    navigate("/login");
  };

  return <button onClick={handleLogout}>Logout</button>;
}

8. Pending UI

Providing feedback during data fetching or mutations enhances user experience. React Router v7 offers tools to manage and display pending states.

1. Global Pending Navigation

Use useNavigation to determine if a navigation is in progress and display a global spinner or loader.

import { useNavigation, Outlet } from "react-router";

export default function Root() {
  const navigation = useNavigation();
  const isNavigating = Boolean(navigation.state !== "idle");

  return (
    <div>
      {isNavigating && <div className="spinner">Loading...</div>}
      <Outlet />
    </div>
  );
}

2. Local Pending Indicators

Display loading indicators next to specific links or buttons when they are in a pending state.

import { NavLink } from "react-router";

export function Navbar() {
  return (
    <nav>
      <NavLink to="/home">
        {({ isPending }) => (
          <>Home {isPending && <span className="spinner">⏳</span>}</>
        )}
      </NavLink>
      <NavLink to="/about">
        {({ isPending }) => (
          <>About {isPending && <span className="spinner">⏳</span>}</>
        )}
      </NavLink>
    </nav>
  );
}

3. Pending Form Submission

Use <fetcher.Form> to manage the pending state of individual form submissions without affecting the entire page.

import { useFetcher } from "react-router";

export function CreatePostForm() {
  const fetcher = useFetcher();
  const isSubmitting = fetcher.state === "submitting";

  return (
    <fetcher.Form method="post" action="/posts/create">
      <input type="text" name="title" placeholder="Post Title" />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Creating..." : "Create Post"}
      </button>
    </fetcher.Form>
  );
}

4. Optimistic UI

Implement optimistic updates to reflect changes in the UI immediately, even before the server confirms the action.

import { useFetcher } from "react-router";

export function ToggleFavorite({ post }) {
  const fetcher = useFetcher();
  const isFavorited = fetcher.formData
    ? fetcher.formData.get("favorite") === "true"
    : post.favorite;

  return (
    <fetcher.Form method="post" action={`/posts/${post.id}/toggle-favorite`}>
      <button
        type="submit"
        name="favorite"
        value={isFavorited ? "false" : "true"}
      >
        {isFavorited ? "★" : "☆"}
      </button>
    </fetcher.Form>
  );
}

9. Testing

Ensuring your application behaves as expected is crucial. React Router v7 provides tools to facilitate testing, especially for components that rely on routing context.

Using `createRoutesStub`

createRoutesStub creates a mock routing environment, allowing you to test components in isolation without needing the entire app.

Example: Testing a Login Form

import { createRoutesStub } from "react-router";
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { LoginForm } from "./LoginForm";

test("LoginForm renders error messages", async () => {
  const USER_MESSAGE = "Username is required";
  const PASSWORD_MESSAGE = "Password is required";

  const Stub = createRoutesStub([
    {
      path: "/login",
      Component: LoginForm,
      action() {
        return {
          errors: {
            username: USER_MESSAGE,
            password: PASSWORD_MESSAGE,
          },
        };
      },
    },
  ]);

  // Render the stub at "/login"
  render(<Stub initialEntries={["/login"]} />);

  // Simulate form submission
  userEvent.click(screen.getByText("Login"));

  // Assert error messages are displayed
  await waitFor(() => screen.findByText(USER_MESSAGE));
  await waitFor(() => screen.findByText(PASSWORD_MESSAGE));
});

Testing Navigation and Data Loading

Ensure your components correctly handle data loading and navigation by mocking route loaders and actions.

import { createRoutesStub } from "react-router";
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { PostList } from "./PostList";

test("PostList deletes a post", async () => {
  const Stub = createRoutesStub([
    {
      path: "/",
      Component: PostList,
      loader() {
        return {
          posts: [
            { id: 1, title: "First Post" },
            { id: 2, title: "Second Post" },
          ],
        };
      },
      action({ params }) {
        if (params.postId === "1") {
          return { isDeleted: true };
        }
        return { isDeleted: false };
      },
    },
  ]);

  render(<Stub initialEntries={["/"]} />);

  const deleteButtons = screen.getAllByText("Delete");

  userEvent.click(deleteButtons[0]);

  await waitFor(() => {
    expect(screen.queryByText("First Post")).not.toBeInTheDocument();
  });

  expect(screen.getByText("Second Post")).toBeInTheDocument();
});

Best Practices for Testing

Mock Loaders and Actions: Ensure that your tests simulate the necessary data fetching and mutations.
Isolate Components: Test components in isolation by providing the required context using stubs.
Simulate User Interactions: Use tools like @testing-library/user-event to mimic real user interactions.
Assert UI Changes: Verify that the UI updates correctly based on different states (e.g., loading, success, error).

10. Custom Framework

React Router v7's extensive features enable it to function as a complete framework for React applications. Here's how it integrates various aspects of development to provide a cohesive and scalable solution.

Comprehensive Features

File-Based or Configuration-Based Routing:

Choose between defining routes via configuration files or using file-system-based conventions for automatic route generation.
Nested Routes and Layouts:

Create reusable layouts and component hierarchies by nesting routes, promoting DRY (Don't Repeat Yourself) principles.
Data Loading and Actions:

Handle data fetching and mutations directly within route modules, streamlining data management and reducing boilerplate.
Rendering Strategies:

Flexibly choose between client-side rendering, server-side rendering, and static pre-rendering based on your application's needs.
State Management:

Efficiently manage navigation and form states with built-in hooks like useNavigation, useFetcher, and useSubmit.
Pending UI and Optimistic Updates:

Enhance user experience by displaying loading states and implementing optimistic UI updates without complex state management.
Testing Utilities:

Easily test components within a mocked routing context, ensuring reliability and maintainability.
SEO and Performance Optimization:

Improve SEO with SSR and static pre-rendering, and optimize performance with efficient data fetching and caching strategies.

Building Scalable Applications

By combining these features, React Router v7 allows you to build scalable, maintainable, and high-performance applications with minimal boilerplate. Its design encourages clear data flow, separation of concerns, and component reusability, which are essential for large-scale applications.

Example: Building a Simple Blog

Let's see how these features come together in a simple blog application.

Project Structure

my-react-router-app/
├── app/
│   ├── routes.ts
│   ├── root.tsx
│   ├── data.ts
│   └── layouts/
│       └── navbar.tsx
├── public/
├── package.json
├── tailwind.config.js
└── ...other files

Route Configuration

// app/routes.ts
import type { RouteConfig } from "@react-router/dev/routes";
import { index, layout, route } from "@react-router/dev/routes";

export default [
  layout("layouts/navbar.tsx", {
    clientLoader: "layouts/navbar.tsx:clientLoader",
    clientAction: "layouts/navbar.tsx:clientAction",
    children: [
      index("routes/home.tsx"),
      route("posts/:postId/destroy", "routes/destroy-post.tsx", {
        clientAction: "routes/destroy-post.tsx:clientAction",
      }),
    ],
  }),
] satisfies RouteConfig;

Navbar Layout

// app/layouts/navbar.tsx
import {
  Form,
  Link,
  Outlet,
  useNavigation,
  useSubmit,
  useEffect,
} from "react-router";
import { getPosts, createEmptyPost } from "../data";
import type { Route } from "./+types/navbar";

export async function clientLoader() {
  const posts = await getPosts();
  return { posts };
}

export async function clientAction() {
  const post = await createEmptyPost();
  return { isCreated: true };
}

export default function NavbarLayout({ loaderData }: Route.ComponentProps) {
  const { isCreated } = loaderData;
  const navigation = useNavigation();
  const submit = useSubmit();

  return (
    <>
      <header className="flex items-center justify-between p-4 bg-gray-800 text-white">
        <Link to="/" className="text-xl font-bold hover:text-gray-300">
          Posts Manager
        </Link>
        <nav className="flex items-center gap-4">
          <Form method="post">
            <button
              type="submit"
              className="bg-blue-600 hover:bg-blue-500 transition px-3 py-1 rounded text-white"
            >
              New
            </button>
          </Form>
        </nav>
      </header>
      <main className="p-4">
        <Outlet context={loaderData} />
      </main>
    </>
  );
}

Home Route

// app/routes/home.tsx
import { Form, useOutletContext } from "react-router";

type LoaderData = {
  posts: Array<{ id: number; title: string }>;
};

export default function Home() {
  const { posts } = useOutletContext<LoaderData>();

  if (!posts.length) {
    return (
      <p className="text-gray-700">
        <i>No posts</i>
      </p>
    );
  }

  return (
    <ul className="space-y-2">
      {posts.map((post) => (
        <li
          key={post.id}
          className="flex items-center justify-between border border-gray-200 p-2 rounded"
        >
          <span className="font-medium">{post.title || <i>No Title</i>}</span>
          <Form method="post" action={`posts/${post.id}/destroy`}>
            <button
              type="submit"
              className="px-3 py-1 bg-red-600 text-white rounded hover:bg-red-500 transition"
              onClick={(e) => {
                const response = confirm(
                  "Are you sure you want to delete this post?"
                );
                if (!response) e.preventDefault();
              }}
            >
              Delete
            </button>
          </Form>
        </li>
      ))}
    </ul>
  );
}

Destroy Post Action

// app/routes/destroy-post.tsx
import { redirect } from "react-router";
import { deletePost } from "../data";
import type { Route } from "./+types/destroy-post";

export async function clientAction({ params }: Route.ClientActionArgs) {
  await deletePost(params.postId);
  return redirect("/");
}

export default function DestroyPost() {
  // This component can remain empty as the action handles the redirection
  return null;
}

Data Management

// app/data.ts
type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
};

let postsCache: Post[] = [];

export async function getPosts() {
  await new Promise((res) => setTimeout(res, 300)); // Simulate delay
  if (postsCache.length === 0) {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts");
    postsCache = await res.json();
  }
  return postsCache;
}

export async function createEmptyPost() {
  const newPost = {
    userId: 1,
    title: "New Post",
    body: "This is a newly created post",
  };
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(newPost),
  });
  const created = await res.json();
  const fullPost = { ...newPost, id: created.id };
  postsCache.unshift(fullPost); // Add new post at the top
  return fullPost;
}

export async function deletePost(id: string | undefined) {
  if (!id) return null;
  await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
    method: "DELETE",
  });
  postsCache = postsCache.filter((p) => p.id !== Number(id));
  return true;
}

Styling with Tailwind CSS

Enhance the visual appeal of your application using Tailwind CSS.

Install Tailwind CSS:

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

Configure tailwind.config.js:

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
     theme: {
       extend: {},
     },
     plugins: [],
   };

Add Tailwind Directives to CSS:

   /* src/index.css */
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

Apply Tailwind Classes:

Use Tailwind's utility classes to style your components, as seen in the Navbar and Home route examples above.

11. Conclusion

By following this step-by-step tutorial, you've learned how to harness the full potential of React Router v7 as a comprehensive framework for your React applications. From setting up your project and configuring routes to managing data, handling actions, and optimizing user experience with pending UI states, React Router provides all the tools you need to build scalable and maintainable applications.

Key Takeaways:

Comprehensive Routing: Define and manage routes efficiently using configuration or file-system conventions.
Data Management: Utilize loaders and actions to handle data fetching and mutations seamlessly within route modules.
Flexible Rendering: Choose between client-side rendering, server-side rendering, and static pre-rendering based on your application's needs.
Enhanced User Experience: Implement pending UI states and optimistic updates to provide responsive and intuitive interactions.
Testing: Leverage testing utilities to ensure your components and routes behave as expected.
Scalability: Build scalable applications by combining React Router's features, promoting clean architecture and maintainability.

For more tutorials, examples, and in-depth guides, be sure to subscribe and check out my YouTube channel Pedrotechnologies.

JWT Authentication With NodeJS

Pedro Henrique Machado — Fri, 10 Jan 2025 17:16:11 +0000

Create a Custom Authentication System with Node.js and JWT

Authentication is essential for modern web applications. In this tutorial, we’ll build a custom authentication system using Node.js, JWT, and React. You'll learn how to set up secure user registration and login, manage authentication states, and handle token expiration with refresh tokens.

Prerequisites

Before starting, ensure you have:

Node.js installed on your system.
Basic understanding of React, Node.js, and JavaScript.
A code editor like VS Code.

Step 1: Set Up the Backend

Start by creating the backend for handling user authentication.

1.1 Initialize the Project

mkdir node-jwt-auth
cd node-jwt-auth
npm init -y

1.2 Install Required Libraries

npm install express jsonwebtoken bcrypt cors

Step 2: Implement the Backend

2.1 Create the Server

Create a file named server.js in the project root:

const express = require("express");
const jwt = require("jsonwebtoken");
const bcrypt = require("bcrypt");
const cors = require("cors");

const app = express();
app.use(express.json()); // Built-in middleware to parse JSON requests
app.use(cors());

// Mock user database
const users = [];

// JWT secret keys
const ACCESS_TOKEN_SECRET = "your_access_token_secret";
const REFRESH_TOKEN_SECRET = "your_refresh_token_secret";

// Refresh token storage
let refreshTokens = [];

// User registration endpoint
app.post("/register", async (req, res) => {
  const { username, password } = req.body;

  // Check if user already exists
  if (users.find((user) => user.username === username)) {
    return res.status(400).json({ error: "User already exists" });
  }

  // Hash the password
  const hashedPassword = await bcrypt.hash(password, 10);

  // Save user
  users.push({ username, password: hashedPassword });
  res.status(201).json({ message: "User registered successfully" });
});

// User login endpoint
app.post("/login", async (req, res) => {
  const { username, password } = req.body;

  // Find user
  const user = users.find((user) => user.username === username);
  if (!user || !(await bcrypt.compare(password, user.password))) {
    return res.status(400).json({ error: "Invalid username or password" });
  }

  // Generate tokens
  const accessToken = jwt.sign({ username }, ACCESS_TOKEN_SECRET, {
    expiresIn: "15m",
  });
  const refreshToken = jwt.sign({ username }, REFRESH_TOKEN_SECRET);

  refreshTokens.push(refreshToken); // Store refresh token
  res.json({ accessToken, refreshToken });
});

// Refresh token endpoint
app.post("/token", (req, res) => {
  const { token } = req.body;
  if (!token || !refreshTokens.includes(token)) {
    return res.status(403).json({ error: "Invalid refresh token" });
  }

  try {
    const user = jwt.verify(token, REFRESH_TOKEN_SECRET);
    const accessToken = jwt.sign(
      { username: user.username },
      ACCESS_TOKEN_SECRET,
      {
        expiresIn: "15m",
      }
    );
    res.json({ accessToken });
  } catch {
    res.status(403).json({ error: "Invalid token" });
  }
});

// Logout endpoint
app.post("/logout", (req, res) => {
  const { token } = req.body;
  refreshTokens = refreshTokens.filter((t) => t !== token);
  res.status(200).json({ message: "Logged out successfully" });
});

// Protected route
app.get("/protected", (req, res) => {
  const authHeader = req.headers.authorization;
  const token = authHeader && authHeader.split(" ")[1];

  if (!token) return res.status(401).json({ error: "Unauthorized" });

  try {
    const decoded = jwt.verify(token, ACCESS_TOKEN_SECRET);
    res.json({ message: "Welcome to the protected route!", user: decoded });
  } catch {
    res.status(403).json({ error: "Invalid or expired token" });
  }
});

// Start the server
app.listen(3001, () => {
  console.log("Server running on http://localhost:3001");
});

Step 3: Set Up the Frontend

3.1 Initialize the React App

npx create-react-app client
cd client
npm install axios

Step 4: Create React Components

4.1 Create an `AuthContext`

Inside the src folder, create a new file AuthContext.js:

import React, { createContext, useState, useContext } from "react";
import axios from "axios";

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = async (username, password) => {
    try {
      const { data } = await axios.post("http://localhost:3001/login", {
        username,
        password,
      });
      localStorage.setItem("accessToken", data.accessToken);
      localStorage.setItem("refreshToken", data.refreshToken);
      setUser({ username });
    } catch (err) {
      console.error(err);
      alert("Invalid credentials");
    }
  };

  const logout = async () => {
    const refreshToken = localStorage.getItem("refreshToken");
    await axios.post("http://localhost:3001/logout", { token: refreshToken });
    localStorage.removeItem("accessToken");
    localStorage.removeItem("refreshToken");
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

4.2 Create Login and Protected Components

Login Component

import React, { useState } from "react";
import { useAuth } from "./AuthContext";

const Login = () => {
  const { login } = useAuth();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  return (
    <div>
      <h1>Login</h1>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={() => login(username, password)}>Login</button>
    </div>
  );
};

export default Login;

Protected Component

import React, { useEffect, useState } from "react";
import axios from "axios";

const Protected = () => {
  const [message, setMessage] = useState("");

  useEffect(() => {
    const fetchData = async () => {
      try {
        const token = localStorage.getItem("accessToken");
        const { data } = await axios.get("http://localhost:3001/protected", {
          headers: { Authorization: `Bearer ${token}` },
        });
        setMessage(data.message);
      } catch {
        setMessage("Unauthorized");
      }
    };
    fetchData();
  }, []);

  return <div>{message}</div>;
};

export default Protected;

Step 5: Run the Application

Start the backend server:

   node server.js

Start the React frontend:

   npm start

Final Thoughts

Congratulations! You've built a secure authentication system with Node.js, JWT, and React. For more tutorials, visit my YouTube Channel.

How to Deploy a Vite + React App to GitHub Pages

Pedro Henrique Machado — Fri, 13 Dec 2024 17:51:28 +0000

If you want to watch this in video form:

Deploying your React app built with Vite to GitHub Pages is quick and easy. Follow these steps:

Prerequisites

A GitHub account.
Node.js and npm installed.
A React project created with Vite.

Steps

Install gh-pages From your project directory, run:

   npm install --save-dev gh-pages

Update package.json Add a homepage field and deploy script:

   {
     "name": "my-vite-react-app",
     "homepage": "https://<your-username>.github.io/<repo-name>/",
     "scripts": {
       "dev": "vite",
       "build": "vite build",
       "predeploy": "npm run build",
       "deploy": "gh-pages -d dist"
     }
   }

Replace <your-username> and <repo-name> with your actual GitHub username and repository name.

Configure Vite Base URL In vite.config.js, set the base to match your repo’s path:

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'

   export default defineConfig({
     base: '/<repo-name>/', // Add this line
     plugins: [react()]
   })

Build and Deploy Run:

   npm run deploy

This command builds your app and pushes the dist folder to the gh-pages branch of your repo.

Access Your Deployed Site Go to:

   https://<your-username>.github.io/<repo-name>/

Done!

Your Vite React app is now live on GitHub Pages.

React Redux Toolkit Course For Beginners - How To Build Using Redux

Pedro Henrique Machado — Fri, 13 Dec 2024 17:41:12 +0000

State management is one of the most essential parts of building modern web applications. It helps maintain consistency across the UI and allows different components to share and update the same data. Redux has been a popular choice for state management in React, but it comes with a lot of boilerplate code that can be difficult to manage. Enter Redux Toolkit — a modern and more efficient way of working with Redux.

In this article, we will explore what Redux Toolkit is, why it was created, and how you can use it to manage state in your React applications in a cleaner and more maintainable way.

If you are looking for a video walkthrough, checkout this video:

What is Redux Toolkit?

Redux Toolkit is an official library that simplifies the usage of Redux by providing utilities that reduce boilerplate code and make Redux easier to set up. It was developed to address some of the common issues that developers face when using Redux, such as repetitive patterns and a steep learning curve.

In essence, Redux Toolkit is an abstraction on top of Redux that offers a set of powerful tools to streamline state management.

Why Use Redux Toolkit?

If you’ve used Redux before, you know how verbose the setup can be. Here are a few reasons why Redux Toolkit is so useful:

Simplified Store Setup: Setting up a Redux store manually involves a lot of configuration. Redux Toolkit’s configureStore method reduces the complexity.
Automatic Immutability Handling: With Redux Toolkit, you don't need to worry about immutability in reducers, thanks to Immer — an immutability library that allows direct mutation of state.
Fewer Lines of Code: Redux Toolkit eliminates the need for repetitive boilerplate code like action creators and reducers.
Better Developer Experience: With built-in debugging tools and enhanced features, Redux Toolkit improves productivity and ease of use.

Getting Started with Redux Toolkit

To get started with Redux Toolkit in a React application, you’ll first need to install it. Open your terminal and run the following command:

npm install @reduxjs/toolkit react-redux

Setting Up the Store

In Redux Toolkit, the process of setting up the store is simplified using the configureStore function. Here's a basic example:

// src/store.js
import { configureStore } from '@reduxjs/toolkit';
import movieReducer from './movieSlice';

const store = configureStore({
  reducer: {
    movies: movieReducer,
  },
});

export default store;

In this example:

We import the configureStore function from @reduxjs/toolkit.
We import a movieReducer that we will create next.
We pass the movieReducer to configureStore, which will automatically create the store and handle middleware setup like Redux DevTools.

Creating a Slice

A slice in Redux Toolkit is a collection of reducer logic and actions for a specific piece of state. Let’s create a slice for managing a list of movies.

// src/movieSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  movies: [],
};

const movieSlice = createSlice({
  name: 'movies',
  initialState,
  reducers: {
    addMovie: (state, action) => {
      state.movies.push(action.payload);
    },
    removeMovie: (state, action) => {
      state.movies = state.movies.filter(movie => movie.id !== action.payload);
    }
  }
});

export const { addMovie, removeMovie } = movieSlice.actions;
export default movieSlice.reducer;

In this slice:

We define an initial state with an empty movies array.
We create two reducers: addMovie (to add a new movie) and removeMovie (to remove a movie by ID).
We export the addMovie and removeMovie actions so that they can be dispatched from our React components.

Using Redux State in React Components

Now that we have our store and slice set up, we can use Redux state in our React components using the useSelector and useDispatch hooks provided by the react-redux library.

Here’s how we can manage the movies in a component:

// src/App.js
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addMovie, removeMovie } from './movieSlice';

const App = () => {
  const [movieName, setMovieName] = useState('');
  const dispatch = useDispatch();
  const movies = useSelector((state) => state.movies.movies);

  const handleAddMovie = () => {
    if (movieName) {
      const newMovie = { id: Date.now(), name: movieName };
      dispatch(addMovie(newMovie));
      setMovieName('');
    }
  };

  const handleRemoveMovie = (id) => {
    dispatch(removeMovie(id));
  };

  return (
    <div>
      <h1>Favorite Movies</h1>
      <input
        type="text"
        value={movieName}
        onChange={(e) => setMovieName(e.target.value)}
        placeholder="Enter movie name"
      />
      <button onClick={handleAddMovie}>Add Movie</button>
      <ul>
        {movies.map((movie) => (
          <li key={movie.id}>
            {movie.name}
            <button onClick={() => handleRemoveMovie(movie.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Explanation:

We use useSelector to access the movies array from the Redux state.
We use useDispatch to dispatch actions, such as addMovie and removeMovie, to modify the Redux state.
The component allows the user to add and remove movies from the list, which is reflected in the UI.

Benefits of Redux Toolkit

Less Boilerplate: Redux Toolkit reduces the amount of repetitive code you need to write. No more action creators or manually writing reducers.
Easy to Use: By using createSlice, Redux Toolkit abstracts away many of the complexities that come with Redux.
Optimized Performance: Redux Toolkit is built with performance in mind and comes with default optimizations for things like middleware.
Built-in Debugging: Redux Toolkit includes built-in support for Redux DevTools, making it easier to debug your application’s state.

What now?

Redux Toolkit is a powerful and modern solution to state management in React applications. It simplifies Redux by reducing boilerplate and provides a better developer experience with tools like configureStore, createSlice, and automatic handling of immutability.

By using Redux Toolkit, you can focus more on building your app’s features and less on the complexities of state management. If you're building a React app and need to handle global state, Redux Toolkit is definitely worth considering.

Resources:

FullStack App Using React and GraphQL (Apollo Client and Apollo Server)

Pedro Henrique Machado — Thu, 12 Dec 2024 17:56:18 +0000

In this tutorial, we’ll walk through the steps to build a full-stack application using React and GraphQL, powered by Apollo Client on the frontend and Apollo Server on the backend. You'll learn how to set up the GraphQL server, define types and resolvers, and connect your React frontend with Apollo Client for seamless data management.

Source Code

If you prefer a video tutorial:

Introduction to GraphQL and the `gql` Language for Beginners

Before we dive into the code, let's take a moment to understand what GraphQL is and how it works. GraphQL is a query language for APIs, and it allows you to ask for exactly the data you need and nothing more. It’s like a flexible, efficient way to fetch data from your backend.

What is GraphQL?

GraphQL is a language for querying and manipulating data in APIs. Instead of asking for fixed data like you would with traditional REST APIs, GraphQL allows you to define the exact structure of the data you want. This can make your applications more efficient because you can request only what’s needed, reducing the amount of data sent over the network.

For example, if you want to fetch a list of users, GraphQL allows you to ask for just the fields you care about—like name and age—without pulling extra data you don’t need (like their email address).

GraphQL Queries

A query in GraphQL is a way to ask for data. You can think of it like making a request to the server to get specific pieces of information.

Here’s an example of a simple GraphQL query:

query {
  getUsers {
    id
    name
    age
  }
}

In this query:

getUsers is the field you want to retrieve data from.
Inside the curly braces, you list the specific fields (id, name, age) that you want to retrieve for each user.

This query tells the server, "Give me a list of users, but only include the id, name, and age fields for each user."

GraphQL Mutations

In GraphQL, mutations are used to create, update, or delete data. If queries are for reading data, mutations are for changing data. A mutation works similarly to a query, but it changes the data in the backend when executed.

Here’s an example of a mutation to create a new user:

mutation {
  createUser(name: "John Doe", age: 30, isMarried: true) {
    id
    name
  }
}

In this mutation:

createUser is the operation we want to perform (creating a new user).
Inside the parentheses, we provide the arguments (name, age, and isMarried) that are required to create the new user.
The fields inside the curly braces (id, name) specify what data we want returned after the mutation is executed.

Why Use GraphQL?

The main advantage of GraphQL over traditional REST APIs is its flexibility. With REST, you might have to make multiple requests to get related data from different endpoints. With GraphQL, you can get all the data you need in a single request, making it more efficient and faster.

The `gql` Tag in Apollo Client

In Apollo Client (and GraphQL in general), we use a special tag called gql to define GraphQL queries and mutations. It’s a way to mark your queries and mutations as GraphQL syntax.

Here’s an example of a GraphQL query using the gql tag in a React app:

import { gql } from "@apollo/client";

const GET_USERS = gql`
  query GetUsers {
    getUsers {
      id
      name
      age
    }
  }
`;

In this code:

We import the gql function from Apollo Client.
The gql function helps define a GraphQL query in a JavaScript-friendly way.
GET_USERS is a query that fetches users' id, name, and age.

Now that we understand the basics of GraphQL and the gql tag, let's proceed with building the full-stack application.

Setting up a GraphQL Server with Apollo and Node.js

We start by setting up the GraphQL server using Apollo Server and Node.js. Below is the backend code where we define our user data and GraphQL API.

import { ApolloServer } from "@apollo/server";
import { startStandaloneServer } from "@apollo/server/standalone";

const users = [
  { id: "1", name: "John Doe", age: 30, isMarried: true },
  { id: "2", name: "Jane Smith", age: 25, isMarried: false },
  { id: "3", name: "Alice Johnson", age: 28, isMarried: false },
];

const typeDefs = `
    type Query {
      getUsers: [User]
      getUserById(id: ID!): User
    }

    type Mutation {
      createUser(name: String!, age: Int!, isMarried: Boolean!): User
    }

    type User {
      id: ID
      name: String
      age: Int
      isMarried: Boolean
    }
`;

const resolvers = {
  Query: {
    getUsers: () => users,
    getUserById: (parent, args) => users.find((user) => user.id === args.id),
  },
  Mutation: {
    createUser: (parent, args) => {
      const { name, age, isMarried } = args;
      const newUser = {
        id: (users.length + 1).toString(),
        name,
        age,
        isMarried,
      };
      users.push(newUser);
      return newUser;
    },
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

const { url } = await startStandaloneServer(server, {
  listen: { port: 4000 },
});

console.log(`Server Running at: ${url}`);

Key Points:

The GraphQL server is set up with Apollo Server.
We define the Query and Mutation types for handling user data.
We provide resolvers for fetching and creating users.

Understanding GraphQL Backend Type Definitions and Resolvers

In GraphQL, type definitions describe the structure of your data. Resolvers are functions that fetch data for specific queries or mutations.

Define GraphQL Types and Resolvers for User Data Management

In this section, we focus on managing user data. We create getUsers and getUserById queries to retrieve all users or a specific user by ID.

const resolvers = {
  Query: {
    getUsers: () => users,
    getUserById: (parent, args) => users.find((user) => user.id === args.id),
  },
};

Defining Required Fields in GraphQL Queries and Mutations

In GraphQL, you can define the required fields in your queries and mutations. In this example, we define a mutation to create a user with required fields: name, age, and isMarried.

const typeDefs = `
  type Mutation {
    createUser(name: String!, age: Int!, isMarried: Boolean!): User
  }
`;

Defining User Types and Resolvers for a GraphQL API

The User type defines the structure of a user object, including fields like id, name, age, and isMarried.

type User {
  id: ID
  name: String
  age: Int
  isMarried: Boolean
}

Implemented GraphQL Queries and User Creation Mutation

We successfully implement the GraphQL queries and mutations. The createUser mutation adds a new user to the users array, while getUsers retrieves the list of users.

const resolvers = {
  Mutation: {
    createUser: (parent, args) => {
      const newUser = { id: (users.length + 1).toString(), ...args };
      users.push(newUser);
      return newUser;
    },
  },
};

Successfully Running Apollo Server Enables GraphQL Queries Testing

Once the Apollo Server is running, you can use tools like Apollo Studio or Postman to test your GraphQL queries and mutations.

Setting Up Apollo Client in a React Application

Next, we integrate Apollo Client into the React application. This enables communication with the GraphQL API.

npm install @apollo/client graphql

import { ApolloProvider, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
  uri: "http://localhost:4000", // Your GraphQL server URL
  cache: new InMemoryCache(),
});

function App() {
  return (
    <ApolloProvider client={client}>
      <div className="App">
        <h1>Welcome to the FullStack App</h1>
      </div>
    </ApolloProvider>
  );
}

Set up Apollo Client for GraphQL Access in a React App

With Apollo Client set up, we now query and mutate the GraphQL API from the React frontend.

Manage Data Loading and Error States in UI Components

We manage loading and error states in the React components when fetching data using Apollo Client.

if (getUsersLoading) return <p>Data loading...</p>;

if (getUsersError) return <p>Error: {error.message}</p>;

Learn to Query Specific Data with GraphQL's Flexibility

GraphQL gives you the flexibility to request only the data you need. Here's an example of a query to get user data by ID.

const GET_USER_BY_ID = gql`
  query GetUserById($id: ID!) {
    getUserById(id: $id) {
      id
      age
      name
      isMarried
    }
  }
`;

Managing Loading States and Displaying User Data in React

We manage the loading states and display the user data fetched from the server. Once the data is loaded, it is displayed in the UI.

{getUserByIdLoading ? (
  <p>Loading user...</p>
) : (
  <>
    <h1>Chosen User:</h1>
    <p>{getUserByIdData.getUserById.name}</p>
    <p>{getUserByIdData.getUserById.age}</p>
  </>
)}

Learn to Define and Use GraphQL Mutations for User Creation

We define a mutation for creating a new user and handle the mutation in the frontend when the user submits their details.

const CREATE_USER = gql`
  mutation CreateUser($name: String!, $age: Int!, $isMarried: Boolean!) {
    createUser(name: $name, age: $age, isMarried: $isMarried) {
      name
    }
  }
`;

const handleCreateUser = async () => {
  createUser({
    variables: {
      name: newUser.name,
      age: Number(newUser.age),
      isMarried: false,
    },
  });
};

Updating User Details and Handling Input Data Types

We handle the input data types for creating a user and update the user details using the mutation.

<input
  placeholder="Name..."
  onChange={(e) =>
    setNewUser((prev) => ({ ...prev, name: e.target.value }))
  }
/>
<input
  placeholder="Age..."
  type="number"
  onChange={(e) =>
    setNewUser((prev) => ({ ...prev, age: e.target.value }))
  }
/>
<button onClick={handleCreateUser}>Create User</button>

Now, the newly created user will be added to the list, and we can see the updated data displayed in the UI.

Congratulations! You've successfully learned how to build a full-stack app using React and GraphQL, with Apollo Client and Apollo Server. You've created a GraphQL API, connected your React frontend, and managed data loading, errors, and mutations.

Happy coding!

A Complete Guide to All React Hooks for Beginners

Pedro Henrique Machado — Thu, 12 Dec 2024 17:44:48 +0000

React hooks revolutionized the way we build components by allowing us to use state and other features in functional components. In this tutorial, we’ll dive deep into all the current React hooks, walking you through practical examples. By the end of this article, you'll have a solid understanding of how each hook works and how you can use them to build better React applications.

If you want to see this guide in video form, check out this video:

Introduction

React hooks are functions that let you "hook into" React's state and lifecycle features from function components. Before hooks, React only allowed these features in class components. Since the introduction of hooks, you can now write fully functional components with powerful capabilities, leading to cleaner and more readable code.

In this article, we’ll cover the most important hooks in React, from the basic useState to the advanced useSyncExternalStore. Each hook will be explained with a hands-on tutorial.

Project Setup

Let’s begin by setting up a simple React project using Create React App.

First, install Create Your React App if you don't have it:
```
npx create-vite
```
Install any dependencies you may need (if you are planning to use additional libraries).
Open the project in your code editor, and start editing App.js. We will demonstrate each hook here with live examples.

`useState` Hook Tutorial

The useState hook allows you to add state to your functional components. Here's how it works:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Declare state

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
}

export default Counter;

Key Points:

useState accepts the initial state as an argument and returns an array with the state variable and the function to update it.
The state persists across re-renders of the component.

`useEffect` Hook Tutorial

The useEffect hook allows you to perform side effects in your components, such as data fetching, subscriptions, or manually changing the DOM.

import React, { useState, useEffect } from 'react';

function FetchData() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty dependency array to run only once

  return (
    <div>
      <h1>Fetched Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default FetchData;

Key Points:

useEffect is invoked after every render unless you provide a dependency array (like []), which makes it run only once when the component mounts.
This hook is ideal for operations that don't directly affect the UI, such as data fetching.

`useContext` Hook Tutorial

The useContext hook allows you to subscribe to React context and access its value in your components.

import React, { useState, useContext } from 'react';

// Create context
const ThemeContext = React.createContext('light');

function ThemedComponent() {
  const theme = useContext(ThemeContext); // Access context value

  return <div>The current theme is {theme}</div>;
}

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
      <ThemedComponent />
    </ThemeContext.Provider>
  );
}

export default App;

Key Points:

useContext allows functional components to consume context directly without needing a consumer component.
It simplifies state sharing across components without prop drilling.

`useReducer` Hook Tutorial

The useReducer hook is an alternative to useState for managing more complex state logic, especially when the state depends on previous state.

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <h1>{state.count}</h1>
      <button onClick={() => dispatch({ type: 'increment' })}>Increase</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrease</button>
    </div>
  );
}

export default Counter;

Key Points:

useReducer is often used when the state is an object or array and requires complex logic to update.
The reducer function is responsible for returning the new state based on the action.

`useRef` Hook Tutorial

The useRef hook provides a way to reference a DOM element or store a mutable value that doesn't cause re-rendering when updated.

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

export default FocusInput;

Key Points:

useRef is used to access the DOM directly or keep a mutable reference across renders.
It does not trigger a re-render when the value changes.

`useImperativeHandle` Hook Tutorial

useImperativeHandle is used with forwardRef to customize the instance value exposed to parent components when using ref.

import React, { useImperativeHandle, useRef, forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));

  return <input ref={inputRef} />;
});

function App() {
  const inputRef = useRef();

  return (
    <div>
      <FancyInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus Input</button>
    </div>
  );
}

export default App;

Key Points:

useImperativeHandle allows you to modify the instance value exposed to the parent through ref.
This is useful when you need to expose only specific methods or properties from a child component.

`useLayoutEffect` Hook Tutorial

useLayoutEffect is similar to useEffect, but it fires synchronously after all DOM mutations. It is useful for reading and modifying the DOM before the browser repaints.

import React, { useLayoutEffect, useState } from 'react';

function LayoutEffectDemo() {
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    setWidth(window.innerWidth); // Measure DOM before render
  }, []);

  return <div>Window width: {width}</div>;
}

export default LayoutEffectDemo;

Key Points:

useLayoutEffect runs synchronously after all DOM mutations, making it ideal for cases where you need to measure or mutate the DOM before it is painted.

`useInsertionEffect` Hook Tutorial

useInsertionEffect runs before all DOM mutations, useful for injecting styles or performing DOM manipulations.

import React, { useInsertionEffect } from 'react';

function InsertionEffectDemo() {
  useInsertionEffect(() => {
    // Custom DOM manipulation or style injection
    document.body.style.backgroundColor = 'lightblue';
  }, []);

  return <div>Check the body background color!</div>;
}

export default InsertionEffectDemo;

Key Points:

useInsertionEffect is for performing operations that need to happen before DOM mutations, like injecting styles.

`useId` Hook Tutorial

useId provides a unique identifier that is stable across server and client renders.

import React, { useId } from 'react';

function InputWithId() {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>Input Label</label>
      <input id={id} />
    </div>
  );
}

export default InputWithId;

Key Points:

useId is useful for generating unique IDs, ensuring consistency in both server-side rendering (SSR) and client-side rendering (CSR).

`useTransition` Hook Tutorial

The useTransition hook allows you to manage slow transitions in UI without blocking interaction.

import React, { useState, useTransition } from 'react';

function TransitionDemo() {
  const [isPending, startTransition] = useTransition();
  const [value, setValue] = useState("");

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => startTransition(() => setValue(e.target.value))}
      />
      {isPending && <div>Loading...</div>}
    </div>
  );
}

export default TransitionDemo;

Key Points:

useTransition is great for handling background tasks or slow updates without blocking the user interface.

`useDeferredValue` Hook Tutorial

The useDeferredValue hook allows you to delay re-rendering non-urgent updates.

import React, { useState, useDeferredValue } from 'react';

function DeferredValueDemo() {
  const [value, setValue] = useState("");
  const deferredValue = useDeferredValue(value);

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <div>{deferredValue}</div>
    </div>
  );
}

export default DeferredValueDemo;

Key Points:

useDeferredValue defers rendering a non-urgent value to improve performance, allowing more critical updates to render first.

`useSyncExternalStore` Hook Tutorial

useSyncExternalStore is used to read data from an external store and subscribe to updates.

import React, { useSyncExternalStore } from 'react';

function useStore() {
  // Simulate external store
  const state = { count: 42 };
  return state;
}

function StoreComponent() {
  const store = useSyncExternalStore(useStore);

  return <div>Store Count: {store.count}</div>;
}

export default StoreComponent;

Key Points:

useSyncExternalStore ensures that your component syncs with external stores in a way that guarantees stability across renders.

Outro

Congratulations! You’ve now learned about all the current React hooks and how to use them effectively. React hooks provide you with a powerful toolkit for building modern, efficient, and easy-to-maintain React applications. Keep experimenting with these hooks to improve your React skills and create amazing apps.

Happy coding!

Forem: Pedro Henrique Machado

TanStack React Query: Crash Course

Table of Contents

Introduction to React Query

What is TanStack React Query?

Setting Up Your Project

Installing React Query Library

Configuring Query Client Provider

Fetching Data from an API

Using the useQuery Hook

Handling Loading and Error States

Understanding Caching in React Query

Fetching Data by ID Example

Introduction to Mutations

Creating a Post with React Query

Handling Post Creation Success

Implementing Optimistic Updates

Conclusion and Next Steps

Fetch Data With RTK Query: Crash Course

Table of Contents

1. Setting Up the Project

Steps to Set Up

2. Creating an API Slice

Define the API Slice

3. Fetching Data with Queries

Using the useGetPostsQuery Hook

4. Creating Data with Mutations

Using the useCreatePostMutation Hook

5. Caching and Optimizing Fetch Requests

6. Manually Refetching Data

Force Refetching Data

7. Configuring the Redux Store

Setting Up Redux Store

8. Using the Data in React Components

9. Conclusion

React Router V7: A Crash Course

Mastering React Router v7: A Comprehensive Step-by-Step Tutorial

Table of Contents

1. Installation

Steps to Install React Router v7

Additional Setup

2. Routing

Configuring Routes

Basic Route Configuration

Advanced Route Configuration

File System Routing (Optional)

3. Route Module

Example Route Module

Nested Routes

Root Route

4. Rendering Strategies

1. Client Side Rendering (CSR)

2. Server Side Rendering (SSR)

3. Static Pre-rendering

Combining Strategies

5. Data Loading

Loader Functions

Client Loader

Combining Loaders

6. Actions

Types of Actions

Client Action Example

Server Action Example

Calling Actions

7. Navigating

1. <Link>

2. <NavLink>

3. <Form>

4. redirect

5. useNavigate()

8. Pending UI

1. Global Pending Navigation

2. Local Pending Indicators

3. Pending Form Submission

4. Optimistic UI

9. Testing

Using createRoutesStub

Example: Testing a Login Form

Testing Navigation and Data Loading

Best Practices for Testing

Using the `useQuery` Hook

Using the `useGetPostsQuery` Hook

Using the `useCreatePostMutation` Hook

1. `<Link>`

2. `<NavLink>`

3. `<Form>`

4. `redirect`

5. `useNavigate()`

Using `createRoutesStub`

4.1 Create an `AuthContext`

Introduction to GraphQL and the `gql` Language for Beginners

The `gql` Tag in Apollo Client