
In [styled-components](https://styled-components.com), there is a `styled(SomeComponent)` notation, which is a very useful tool for customizing some components. But sometimes, it doesn't work. But how? And why?

**TLTR**: `SomeComponent` must accept a passed-in `className` prop.

See this [CodeSandbox](https://codesandbox.io/s/styled-notation-0br3z9), the `TextLinkA` component CANNOT be customized by `styled()`. But `TextLinkB`, on the other hand, CAN!

The difference between them is the `...rest` prop which also includes `className`❗

In the styled-components [document](https://styled-components.com/docs/advanced#styling-normal-react-components), it says:

> If you use the ` styled(MyComponent)` notation and `MyComponent` does not render the passed-in `className` prop, then no styles will be applied. To avoid this issue, make sure your component attaches the passed-in `className` to a DOM node.

Because styled-components generates a random string as the `className` for each _StyledComponent_ (the component defined by styled-components), this `className` contains the styling CSS. When using the `styled()` notation to wrap a StyledComponent, a new `className` is generated, but the styles are not applied unless we pass this new `className` to the original StyledComponent.

In the CodeSandbox example, I use `...rest` to represent all of the other props, but we can also specify it with `className`.


How to make sure the styled() notation in styled-components works, and the reason of it.

Why `styled()` Notation Doesn't Work


Yesterday people in the Discord of [CSS for JS Developers Course](https://css-for-js.dev) asked whether there's any solution to achieve a full-bleed image within a wrapper with a maximum width.

## My Solution

So I tried this out:

```html
<article>
  <p>...</p>
  <img class="full-bleed" src="" />
  <p>...</p>
  <p></p>
</article>

<style>
  article {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .full-bleed {
    max-width: 100vw;
  }
</style>
```

The entire code is in [this Codepen](https://codepen.io/cyishere/pen/RwMbPeX).

## Other "Trick"

Then [Josh](https://www.joshwcomeau.com/) shared [this solution](https://css-tricks.com/full-bleed/) posted on _CSS-Tricks_. I think the solution is very COOL.

```css
.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
```

This does not require any additional settings. In my case, I set the elements in the `article` to Flexbox layout, which may cause some unexpected problems.

## More Reading

- [Full-Bleed Layout Using CSS Grid](https://www.joshwcomeau.com/css/full-bleed/)


Solutions for a full-width element within a constrained-width column, like an edge-to-edge image within a narrower column

Full Bleed within A Constrained Wrapper


I recently refactored this blog using [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote). Previously, I used [@next/mdx](https://www.npmjs.com/package/@next/mdx). I'll explain the differences between these two methods and why I chose `next-mdx-remote` in the article.

## The Very Complex `@next/mdx` Way

With `@next/mdx`, the Next.js can read every MDX file as a page. The file structure looks like this:

```bash
- pages/
	- blog/
		- article-1.mdx
		- article-2.mdx
		- article-3.mdx
	index.tsx
	about.tsx
```

There is also no need to create a file like this `pages/blog/[slug].jsx` to dynamically display the articles. This seems very convenient. But the disadvantage is that the structure of each MDX file becomes very complex.

**First**, we must import the layout component that each article page requires and export a default component wrapped in this layout:

```markdown {3-7}
// article-1.mdx

import { PostLayout } from "@/components/Layout";

export default ({ children }) => (
<PostLayout meta={meta}>{children}</PostLayout>
);

// The main markdown content
This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block.
```

**Second**, if we require additional components in this file, we must manually import them. For example, if I created a `Figure` component to display images, I must import it into each post's MDX file:

```markdown {4}
// article-1.mdx

import { PostLayout } from "@/components/Layout";
import Figure from "@/component/Figure";

export default ({ children }) => (
<PostLayout meta={meta}>{children}</PostLayout>
);

This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block.

// Then use `Figure` in the main content

<Figure
  alt="slideshow screenshot"
  src="/img/blog/accessible-slideshow-with-react/slideshow-screenshot.png"
  width={900}
  height={600}
/>
```

**Finally**, we must create an object to serve as `frontmatter` and pass it to the default component:

```markdown {5-11,14}
// article-1.mdx

import { PostLayout } from "@/components/Layout";

export const meta = {
title: "@next/mdx Or next-mdx-remote",
description:
"When building a blog with MDX and Next.js, there are so many ways. In this article, I'll show you why I choose next-mdx-remote instead of @next/mdx.",
createdAt: "2022-06-26",
tags: ["mdx", "next.js"],
};

export default ({ children }) => (
<PostLayout meta={meta}>{children}</PostLayout>
);

// The main markdown content
This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block.
```

## The Clean `next-mdx-remote` Way

With `next-mdx-remote`, we can write an article in **normal** markdown syntax:

```markdown
// article-1.mdx

---

title: "@next/mdx Or next-mdx-remote"
description: "When building a blog with MDX and Next.js, there are so many ways. In this article, I'll show you why I choose next-mdx-remote instead of @next/mdx."
createdAt: "2022-06-26"
tags: ["mdx", "next.js"]

---

This is a text block.

## This Is a Heading

<Figure
  alt="slideshow screenshot"
  src="/img/blog/accessible-slideshow-with-react/slideshow-screenshot.png"
  width={900}
  height={600}
/>

This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block. This is a text block.
```

We place meta data between two `---`, use any component without importing it in each file, and do not need to import the page layout.

To generate pages for each article, we use the _Next.js way_.

```jsx {3,10}
// pages/blog/[slug].jsx

const PostPage = ({ mdxSource, meta }) => {};

export default PostPage;

/**
 * Get artciel date in `getStaticProps` function
 */
export function getStaticProps({ params }) {
  // omitted

  return {
    props: {
      mdxSource, // The main content in each mdx file
      meta, // The frontmatter part
    },
  };
}
```

To use the custom components, we pass them to the `MDXRemote`'s `component` prop, which is from `next-mdx-remote`:

```jsx {7-14,20}
// pages/blog/[slug].jsx

import { MDXRemote } from "next-mdx-remote";
import { PostLayout } from "@/components/Layout";

const PostPage = ({ mdxSource, meta }) => {
  const components = {
    a: ({ children, ...props }) => (
      <Link {...props} passHref>
        <a>{children}</a>
      </Link>
    ),
    Figure,
  };

  return (
    <PostLayout>
      <h1>{meta.title}</h1>
      // Show the article content
      <MDXRemote {...mdxSource} components={components} />
    </PostLayout>
  );
};

export default PostPage;

// omitted
```

[Here](https://github.com/cyishere/cyishere2022/blob/main/pages/blog/%5Bslug%5D.tsx) is the entire code.

## Conclusion

Article pages can be generated from MDX files or dynamic routes; they are all static pages that are generated at build time. However, as shown in the code above, the `next-mdx-remote` method keeps the files cleaner and allows you to use the `getStaticProps` function. I hope this article could help you in deciding which to use.


When building a blog with MDX and Next.js, there are so many ways. In this article, I'll show you why I choose next-mdx-remote instead of @next/mdx.

@next/mdx VS. next-mdx-remote

@next/mdx Or next-mdx-remote


## The Needs

There are blogs, websites, and online documents that have their code block with some lines highlighted. As in the screenshot below.

<Figure
  src="https://res.cloudinary.com/cyishere/image/upload/v1656157038/cyishere/blog/code-block-with-highlighting-lines_newky9.png"
  alt="Screenshot: code block with highlighting lines"
  width={664}
  height={457}
/>

I always want to implement this cool thing for my own blog which is made of Next.js and MDX. I use [Prism.js](https://prismjs.com/) for highlighting the syntax of the code block. However, I couldn't find a way to enable its [Line Highlight plugin](https://prismjs.com/plugins/line-highlight/).

## The Flawed Way

My old approach was calling Prism in `useEffect`:

```js {2,5-9}
// This is the blog post layout component
import Prism from "prismjs";

const BlogPost = (props) => {
	useEffect(() => {
		if (typeof window !== "undefined") {
			Prism.highlightAll()
		}
	}, []);

	return (
		// omitted
	)
}
```

This approach cannot implement line highlight (at least not that I am aware of).

## The Right Way

After a VERY LONG time of research, I finally discovered a solution: instead of using `prismjs` with `next-mdx-remote`, we can use [rehype-prism-plus](https://www.npmjs.com/package/rehype-prism-plus) with `next-mdx-remote`.

As the `next-mdx-remote` [official document says](https://github.com/hashicorp/next-mdx-remote#apis) when we serialize the MDX content, we can use `remarkPlugins` and `rehypePlugins`. `rehype-prism-plus` is one of the "rehypePlugins".

So with putting `rehypePrism` in that `rehypePlugins` array, we can use `rehypePrism` just like it should be and without any additional configurations. The code is something like this:

```jsx {2,17}
// This is the UPDATED blog post layout component
import { serialize } from "next-mdx-remote/serialize";
import rehypePrism from "rehype-prism-plus";

const BlogPost = (props) => {
  // omitted
};

export const getStaticProps = async ({ params }) => {
  const content = {
    // omitted, not really like this
  };

  const mdxSource = await serialize(content, {
    mdxOptions: {
      remarkPlugins: [],
      rehypePlugins: [rehypePrism],
    },
  });

  return {
    // omitted
  };
};
```

[Here](https://github.com/cyishere/cyishere2022/blob/main/pages/blog/%5Bslug%5D.tsx) is the whole code of this blog post page.

<Figure
  src="https://res.cloudinary.com/cyishere/image/upload/v1656157038/cyishere/blog/dom-with-extra-class_mvv4lt.png"
  alt="Screenshot: DOM with extra class"
  width={516}
  height={408}
/>

With this setup, if we inspect the code block with the Chrome dev tool, we can see that line 2 and line 16 have an extra class `highlight-line` (as seen in the screenshot above). Make sure the stylesheet for code block has `highlight-inline` style defined.

```css
code[class*="language-"] .highlight-line {
  background-color: hsl(256deg 100% 96%);
  display: block;
}
```

I import this stylesheet in the `_app.tsx` file to make it use globally.


Make lines highlighting with Prism.js in markdown(mdx) code block.

Highlight Lines in Code Block with Prism.js and MDX


This article is about how to give the navigation items for each page in the new static site generator - [Astro](https://astro.build) - an active-state style. (What a long sentence. 😮‍💨)

And there are _two_ ways. (These code are written in [Astro Component](https://docs.astro.build/en/core-concepts/astro-components/#overview).)

## The Old Good JavaScript Way

In the code below, we write the vanilla JavaScript in a `script` tag, which tells Astro to give this code block to the browser. It will work in a regular way.

```javascript
// src/components/Navbar.astro

<nav>
  <a class="active" href="/">Home</a>
  <a href="/portfolio">Portfolio</a>
  <a href="/posts">Article</a>
  <a href="/about">About Me</a>
  <a href="/contact">Contact Me</a>
</nav>

<script>
  const navLinks = document.querySelectorAll("nav a");

  navLinks.forEach((link) => {
    link.classList.remove("active");

    // `slice` here to remove the first `/` in pathname
    const currentPath = window.location.pathname.slice("1");

    // `link.href` returns a whole url, such as: "https://somedomain.com/posts" and we only need the last part
    const hrefArray = link.href.split("/");
    const thisPath = hrefArray[hrefArray.length - 1];

    if (currentPath === thisPath) {
      link.classList.add("active");
    }
  });
</script>
```

## The Astro Way

We take advantage of Astro's [Runtime API](https://docs.astro.build/en/reference/api-reference/#astrorequest) and get the pathname in Astro components' [component script](https://docs.astro.build/en/core-concepts/astro-components/#the-component-script).

```javascript
// src/components/Navbar.astro

---
const pathname = new URL(Astro.request.url).pathname;
const currentPath = pathname.slice(1); // remove the first "/"
---

<nav>
  <a class={currentPath === "" ? "active" : ""} href="/">Home</a>
  <a class={currentPath === "portfolio" ? "active" : ""} href="/portfolio">Portfolio</a>
  <a class={currentPath === "posts" ? "active" : ""} href="/posts">Article</a>
  <a class={currentPath === "about" ? "active" : ""} href="/about">About Me</a>
  <a class={currentPath === "contact" ? "active" : ""} href="/contact">Contact Me</a>
</nav>
```


Highligh navlink, nav items with active states for current page in Astro.

Highlight Nav Link for Current Page in Astro


When I wrote a server API with Next.js, I encountered this error: `Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client`.

## The Problem

This is the simplified version of my code:

```javascript
// /api/user/me

export default async function handler(req, res) {
  const { id } = req.params;

  // check whether there's this user in database
  const verified = checkIdWithDatabase(id);

  if (verified) {
    res.status(200).json({ authenticated: true });
  }

  res.status(200).json({ authenticated: false });
}
```

The problem in this code is: the code executes **TWO** `res.json(...)`, because there's no `return` after the user's id is verified and `true` the code executes the "scenario 1️", then it execute "scenario 2️", too. That's why the error says "Cannot ... after they are sent to the client", the "scenario 1️" is already send to the client.

## The Solution

**Solution 1**: only get one result from a condition by using `if ... else`:

```javascript
// other parts are omitted

if (verified) {
  res.status(200).json({ authenticated: true });
} else {
  res.status(200).json({ authenticated: false });
}
```

**Solution 2**: add `return` statement:

```javascript
// other parts are omitted

if (verified) {
  // 1️⃣
  return res.status(200).json({ authenticated: true });
}

res.status(200).json({ authenticated: false });

// ============== OR ================

if (verified) {
  // 2️⃣
  res.status(200).json({ authenticated: true });
  return;
}

res.status(200).json({ authenticated: false });
```

These solutions can be applied to Express.


Fix Next.js or Express headers re-send error.

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

Set Headers Error with Next.js or Express


After I updated my MacOS to Monterey, every time I changed the directory in the terminal this message below popped up:

```bash
env: python: No such file or directory
```

But I've already installed Python3. I googled out that Monterey removed Python2.7, but it cannot automatically point to Python3...

It took me 2 hours to find the solution, here they are:

## Step 1: Make Sure Python3 Is Installed

Use `whereis python3` to make sure it is installed. At this time, it would show something like this:

```bash
python3: /usr/bin/python3
```

## Step 2: Find Out the Brew Info

When installing Python3 with Home-brew, it also creates a `libexec` folder with unversioned symlinks, which can be found by this command: `brew info python`.

After executing this command, there will be something like the below print out:

```bash
python@3.9: stable 3.9.7
Interpreted, interactive, object-oriented programming language
https://www.python.org/

/usr/local/Cellar/python@3.9/3.9.7 (2,882 files, 49.3MB)

Poured from bottle on 2021-09-15 at 22:09:14

From: https://github.com/Homebrew/homebrew-core/blob/HEAD/Formula/python@3.9.rb

License: Python-2.0

==> Dependencies

Build: pkg-config ✔

Required: gdbm ✔, mpdecimal ✔, openssl@1.1 ✔, readline ✔, sqlite ✔, xz ✔

==> Caveats

Python has been installed as

/usr/local/bin/python3

Unversioned symlinks `python`, `python-config`, `pip` etc. pointing to

`python3`, `python3-config`, `pip3` etc., respectively, have been installed into

/usr/local/opt/python@3.9/libexec/bin
```

I omit the rest of the print-out because the MOST IMPORTANT part of this is the _last line_.

## Step 3: Update Your $PATH

Put the directory path in that last line to your `.bash_profile` or `.zshrc`, depending on which one of them you're using. The complete syntax is:

```bash
export PATH="/usr/local/opt/python@3.9/libexec/bin:$PATH"
```

Save the file and update the shell environment:

```bash
source ~/.bash_profile

# OR

source ~/.zshrc
```

Voilà! The `env: python: No such file or directory` problem is solved!

Now type `whereis python3` again, the result would be something like this: `python3: /usr/bin/python3 /usr/local/share/man/man1/python3.1`.

## Summary

Your situation may be different from mine, so for more references, I put some links here and hope these would help you.

- [env: python: No such file or directory when building app with Xcode](https://stackoverflow.com/questions/71468590/env-python-no-such-file-or-directory-when-building-app-with-xcode)
- [MacOs Monterey Python3 as default](https://stackoverflow.com/questions/70126868/macos-monterey-python3-as-default)
- [How to fix "zsh: command not found: python" error? (macOS Monterey 12.3,
  python 3.10, Atom IDE, atom-python-run 0.9.7](https://stackoverflow.com/questions/71591971/how-to-fix-zsh-command-not-found-python-error-macos-monterey-12-3-python)


Python doesn't work after Mac has updated to Monterey. Here's how to fix it.

MacOS env: python: No such file or directory

MacOS Monterey Breaks Python, How to Fix it?


> [!INFO] This project is made for participating the [Hashnode x Hasura Hackathon](https://townhall.hashnode.com/hasura-hackathon), but I totally missed the deadline.😬

## The Problem

In the language world, all German nouns have gender. There are three genders of them, a noun is either _masculine_, _feminine_ or _neuter_. And they don't follow the "nature rules", such as how the word "chair" is masculine, not neuter? Because of these genders, each noun has a distinct article, one of the "_die/das/der_"; in English, there's only one "the". This is why it is more difficult for people to remember nouns when learning German. If you like me who struggle with remembering the genders, I introduce you to the DDD App.

## Introducing DDD App

DDD is a flashcard-like application. There are a lot of nouns for people to learn and remember, and there are review sessions to see if they remember them. However, it is more than just a flashcard app.

### Color-coded

We use three colors to represent the three genders:

- Red denotes masculine;
- Blue denotes feminine;
- Green denotes neuter;

Color serves as a visual indicator; it does not require much brainwork, but it can still have an impact on the subconscious. With this method when I was thinking of a noun, the specific article did not always come to mind, but the color did.

### Spaced Repetition System Algorithm

Many flashcard-ish applications or learning platforms use the [Spaced Repetition System](https://en.wikipedia.org/wiki/Spaced_repetition) technique, but some of them, such as the [Anki App](https://www.ankiapp.com/), require users to make extra efforts to manually determine whether or not they know a word. (Besides the extra efforts, I sometimes fool myself to choose that I've remembered it. 🤦🏻‍♀️)

<Figure
  alt="Other apps"
  src="https://res.cloudinary.com/cyishere/image/upload/v1649070038/cyishere/blog/ddd-app-a-neat-tool-for-remembering-german-nouns/other-apps_foiolo.png"
  width={800}
  height={450}
/>

In DDD, our SRS algorithm takes care of this, **our app remembers** how well a user knows a word.DDD decides when to review some of the words based on whether the user selected the correct answer in his/her previous review sessions.

The following are the six stages of reviewing:

- Stage 0: unlock immediately after learning the word;
- Stage 1: unlock one day after learning the word;
- Stage 2: unlock four days after the first review;
- Stage 3: unlock two weeks after the second review;
- Stage 4: unlock two months after the third review;
- Stage 5: user has remembered the word.

(I've learned these "spaced stages" from [Execute Program](https://www.executeprogram.com/).)

In case you're wondering, "DDD" is an abbreviation for the German articles "die," "der," and "das." 😄

## App Walkthrough

### To Learn

After logging into the app, the user can go to the dashboard by clicking the link in the navigation bar. The user can select a set of words to learn from the dashboard (for the time being, there is only one set).

<Figure
  alt="Start to learn the words"
  src="https://res.cloudinary.com/cyishere/image/upload/v1649070037/cyishere/blog/ddd-app-a-neat-tool-for-remembering-german-nouns/start_ul42bz.png"
  width={1421}
  height={531}
/>

By "learn," we mean that the user reads through the word cards by clicking the "Next" button. A learning session can be terminated at any time. The user's newly learned words would then appear in the "review cards."

### To Review

The review cards will appear after the user has learned a few words. To select a review session, click the review card. (*If nothing shows up, please refresh the page. Sorry about this.*😬) During the review session, the user must choose an article for each word. There are various UI states that indicate whether the user's answer is correct. Our algorithm will use the correct or incorrect result to determine when to review it again.

<Figure
  alt="The review session"
  src="https://res.cloudinary.com/cyishere/image/upload/v1649070037/cyishere/blog/ddd-app-a-neat-tool-for-remembering-german-nouns/review_zhgpuw.png"
  width={1440}
  height={1068}
/>

## Technologies and Tools Used

- **Design**: Figma + Untitled UI
- **Backend**: [Hasura](https://hasura.io)
- **Frontend**: Next.js + Apollo Client
- **Tools**: TypeScript, [GraphQL Codegen](https://www.graphql-code-generator.com/)

## Building DDD App

### Planing

I found out about this [hashnode+hasura hackathon](https://townhall.hashnode.com/hasura-hackathon) on March 13, which means I only have less than three weeks to make this app. I have a clear vision of the functionality parts, but putting them into action requires more work. I decided to begin with design.

### Designing

The screens of this app mostly are word cards, which are simple but also have aesthetic requirements. I'm not good at UI design, so I used [Untitled UI](https://www.untitledui.com) as the boilerplate and designed the screens in [Figma](https://www.figma.com).

<Figure
  alt="Design in Figma"
  src="https://res.cloudinary.com/cyishere/image/upload/v1649070037/cyishere/blog/ddd-app-a-neat-tool-for-remembering-german-nouns/design-in-figma_derjr3.png"
  width={1176}
  height={716}
/>

The challenging part in designing is that we are used to using red-ish colors to represent "error" or "danger" and using green-ish colors to represent "success", but the main feature of the DDD app is to use "red" and "green" to represent the nouns' genders. This makes displaying the UI states of "success" and "error" become more difficult.

The decision of using RGB to denote the genders is because these three colors are very common and have their own "tone". The last thing I want is that users need to expend extra energy besides remembering the nouns, and memorizing special colors IS extra energy.

As a result, I chose yellow to represent "success" and gray for the "error" state. Yellow is bright and joyful and has a "success" vibe. Gray is dull and its dark hue is ideal for "failure". Also with a bit of animations.

![Success](https://res.cloudinary.com/cyishere/image/upload/v1649070037/cyishere/blog/ddd-app-a-neat-tool-for-remembering-german-nouns/success_ibr1ht.gif)

![Fail](https://res.cloudinary.com/cyishere/image/upload/v1649070037/cyishere/blog/ddd-app-a-neat-tool-for-remembering-german-nouns/fail_vpkf6q.gif)

### Building

The easy part is creating the screens with Next.js and [styled-components](https://styled-components.com/). The most difficult parts are learning how to use Hasura, implementing Auth0 with Hasura and Next.js, wiring up the API to the front-end, and calculating the three types of cards: to-learn-card (how many words remain to learn), to-review-card (how many words are available for review), and learned-card (how many words already learned/remembered).

This is the first time I use Hasura. Before this, my only experience with SQL databases was following along with [Prisma](https://www.prisma.io/)'s tutorials. So in the beginning, I used Prisma to sketch out my visions to get a better sense of the database, then implement it in Hasura.

<Figure
  alt="From Prisma to diagram"
  src="https://res.cloudinary.com/cyishere/image/upload/v1649070037/cyishere/blog/ddd-app-a-neat-tool-for-remembering-german-nouns/from-prisma-to-diagram_ue55jv.png"
  width={1176}
  height={690}
/>

After modeling the database, I spent a week figuring out how to integrate Hasura, Auth0, Next.js, and Apollo Client. Then came the real challenge: querying and mutating with the API.

### Deploying

I use [Vercel](https://vercel.com) for deploying the DDD app. Vercel is no doubt the best choice for a Next.js app.

## Challenges I Faced

Since starting to learn React in March 2020, this is the first app I've created from scratch and without any tutorial references, the first time to use Hasura, and the first time to use Next.js with GraphQL.

I started this journey with full joy and ambition, but now I'm beginning to doubt myself. Whether I made the right decision about the UX flow -- is that helpful to users to know how many words to learn, review, etc? Whether I designed the right database model? Would it be better with those calculations if the database was different?

Anyone who reads [my code](https://github.com/cyishere/ddd-app/blob/main/pages/set/%5Bslug%5D.tsx) will notice that there are queries nested within queries that contain calculations and comparisons. Do I truly benefit from the brilliant GraphQL?

## What's Next

First of all, fix a bug which is by finding a better way to update the ready-to-review cards. For now, the ready-to-review cards only query from API(database) when the user first time opens the dashboard page. That feature needs to be updated after a user has learned any number of new words. Because of the queries-nested-within-queries issue, I'm not sure how to update it is better: updating the cache or using a subscription to monitor.

And some other todos:

- Improve accessibility with responsive design;
- Add more words; (obviously)
- Add sound effects for the "success" and "fail" states;
- Benefit from Hasura's permission feature.

## Useful Links

- [Live App Link](https://ddd.cyishere.dev)
- [GitHub Repo](https://github.com/cyishere/ddd-app)

## That's All Folks

This is all about DDD App (for now). If you've read this article and tested my app, please give me some advice. Thank you very much. You can find me on:

- [Twitter](https://twitter.com/cyishere)
- [GitHub](https://github.com/cyishere)
- [My personal website](https://cyishere.dev)


Making a practical project with Next.js, Apollo Client and Hasura.

DDD App: a Project with Next.js, Apollo Client and Hasura

DDD App: a Neat Tool for Remembering German Nouns


As I used the [GraphQL Code Generator](https://www.graphql-code-generator.com/) before, I found out that making this Codegen work with [Hasura](https://hasura.io) in [Next.js](https://nextjs.org/) needs some special configurations.

## Set Codegen Configurations for Hasura

The [Hasura's official tutorial](https://hasura.io/learn/graphql/typescript-react-apollo/codegen/) provides a settings code block which I modified some "special configurations" in it (with the ⛑️ indicator):

```javascript
// ./codegen.js

// ⛑️ Change 1: import "dotenv"
require("dotenv").config();

// ⛑️ Change 2: Get Hasura's GraphQL API from environment variables
const API = process.env.HASURA_GRAPHQL_API;

module.exports = {
  schema: [
    {
      // ⛑️ Change 3: Use the `API` variable that just defined
      [API]: {
        headers: {
          // ⛑️ Change 4: Add content type
          "content-type": "application/json",
          // ⛑️ Change 5: Add admin secret from environment variables
          "x-hasura-admin-secret": process.env.HASURA_ADMIN_SECRET,
        },
      },
    },
  ],
  documents: ["./src/**/*.tsx", "./src/**/*.ts"],
  overwrite: true,
  generates: {
    "./src/generated/graphql.tsx": {
      plugins: [
        "typescript",
        "typescript-operations",
        "typescript-react-apollo",
      ],
      config: {
        skipTypename: false,
        withHooks: true,
        withHOC: false,
        withComponent: false,
      },
    },
    "./graphql.schema.json": {
      plugins: ["introspection"],
    },
  },
};
```

**Explain about these changes**:

- Change 1: for this `codegen.js` file can get environment variables, we need to install [dotenv](https://www.npmjs.com/package/dotenv) and import it into this file.
- Change 2 & Change 3: these two are optional. I don't want to expose my Hasura GraphQL API, so I choose to store it as an environment variable. Whether add these is up to you.
- Change 4 & Change 5: interacting with Hasura GraphQL API needs some permissions which are specified in the request `headers`.

<Figure
  src="https://res.cloudinary.com/cyishere/image/upload/v1649219252/cyishere/blog/make-graphql-codegen-work-with-hasura-in-nextjs/hasura-api-console_ssj0xp.png"
  alt="Headers in the GraphQL API from Hasura console"
  width={1210}
  height={275}
/>

In the picture above, at default Hasura GraphQL API needs `content-type` and `x-hasura-admin-secret`. **This is why I make the "4" and "5" changes.** After setting the permissions in the database tables, we can interact with the API with `x-hasura-role` and `x-hasura-user-id`. More "permission" content could find in [their official tutorials](https://hasura.io/learn/graphql/hasura/authorization/1-todos-table-permissions/).

## Special Attentions for Next.js

We usually put environment variables in the `.env.local` file for Next.js applications, but this `codegen.js` file CANNOT read `.env.local`, so we need to create a `.env` file in the root directory just for Codegen and put those essential variables in it. The Codegen will not work without this.

## Last Step

Don't forget to add a script in the `package.json` file for using Codgen:

```json
{
  "scripts": {
    "gen": "graphql-codegen --config codegen.js"
  }
}
```

## More Infos

This is a note from me about developing an application with Next.js and Hasura. The app is called [DDD App](https://ddd.cyishere.dev), and it is a tool for remembering German nouns. You can learn more about it [here](/blog/ddd-app-a-neat-tool-for-remembering-german-nouns).


Configure GraphQL Code Generator for Hasura and Next.js

Make GraphQL Codegen Work with Hasura in Next.js


The author discusses accessibility in-depth in the article ["How to build a more accessible carousel or slider"](https://dev.to/jasonwebb/how-to-build-a-more-accessible-carousel-or-slider-35lp), with examples in vanilla JavaScript. It helps me a lot; please read it to get a thorough understanding. In the article below, I demonstrated how to create an accessible slideshow with React.

Or read the entire code [on CodeSandbox](https://codesandbox.io/s/accessible-slideshow-158x8).

---

Here's the screenshot of the example slideshow:

<Figure
  alt="slideshow screenshot"
  src="/img/blog/accessible-slideshow-with-react/slideshow-screenshot.png"
  width={900}
  height={600}
/>

This is a simple one. The slideshow only has two buttons to navigate to the previous or the next slide. Every slide has one focusable element (`a` link).

I wrote the HTML(JSX) with some ARIA attributes at first.

```javascript
<section aria-labelledby="carouselheading">
  <h2 id="carouselheading">The List of "The Matrix" Series</h2>

  {/* Add some introductions for this slideshow and visually hide it. */}
  <p className="sr-only">
    Carousel with one slide shown at a time. Use the Previous and Next buttons
    to navigate.
  </p>

  {/* The Previous button */}
  <button className="btn nav prev">
    <span className="sr-only">Previous One</span>
    <ChevronLeft size={64} />
  </button>

  {/* The group of slides */}
  <div className="slides">
    {MOVIES.map((movie, index) => (
      <div
        className="slide"
        key={movie.id}
        role="group"
        aria-label={`slide ${index + 1} of ${MOVIES.length}`}
        style={{
          "--translateX": `-${slideIndex * 100}%`,
        }}
      >
        <article>
          <h3>{movie.title}</h3>
          <p className="year">{movie.release_year}</p>
          <p className="director">
            Directed by <em>{movie.director}</em>
          </p>
          <a className="btn btn-primary" href={movie.link}>
            Details
          </a>
        </article>
        <figure>
          <img src={movie.poster} alt={`${movie.title} poster`} />
        </figure>
      </div>
    ))}
  </div>

  {/* The Next button */}
  <button className="btn nav next">
    <span className="sr-only">Next One</span>
    <ChevronRight size={64} />
  </button>
</section>
```

[View the whole code on CodeSandbox](https://codesandbox.io/s/accessible-slideshow-158x8)

Although I used SVG icons for the previous and next buttons, I also wrote the text and wrapped it in elements labeled with `sr-only` classes to visually hide the text for accessibility.

For now, it is semantically accessible but not practical when used with a keyboard.

<Figure
  alt="Bad slideshow screenshot"
  src="/img/blog/accessible-slideshow-with-react/bad-slider.gif"
  width={640}
  height={374}
/>

When we walk through the document with keyboard, the focus order depends on the order of the DOM. So, we need JavaScript to change the `tabindex` of the visually hidden slide items, also add `aria-hidden` to them from the accessibility devices. In this React app, I used `useRef` to access those `div` slide items.

```javascript
const App = () => {
	const slidesRef = useRef([]);

	const makeSlidesAccessible = () => {
		// Hiding all the slides and their content
		slidesRef.current.forEach((slide) => {
			if (slide) {
				slide.setAttribute("aria-hidden", "true");
				slide.querySelector("a").setAttribute("tabindex", "-1");
			}
		});
	};

	useEffect(() => {
		makeSlidesAccessible();
	}, []);

	return (
		{/* omit */}
		{MOVIES.map((movie, index) => (
			<div
				ref={(element) => slidesRef.current.push(element)}
				className="slide"
				key={movie.id}
				role="group"
				aria-label={`slide ${index + 1} of ${MOVIES.length}`}
				style={{
					"--translateX": `-${slideIndex * 100}%`
				}}
			>
			{/* omit */}
			</div>
		))}
		{/* omit */}
	);
};
```

In the code above, besides setting `aria-hidden` to `"true"` for all the slide items, I made every `a` link within those items "unfocusable" by setting `tabindex` to `"-1"` to prevent the keyboard event from focusing on any hidden slides.

Next, by removing those added attributes, I made the **current** slide "visible" to accessibility devices and the `a` link focusable again.

```javascript
const App = () => {
  const [slideIndex, setSlideIndex] = useState(0);
  const slidesRef = useRef([]);

  const makeSlidesAccessible = () => {
    // Hiding all the projects and their content
    slidesRef.current.forEach((slide) => {
      if (slide) {
        slide.setAttribute("aria-hidden", "true");
        slide.querySelector("a").setAttribute("tabindex", "-1");
      }
    });

    // Make sure the current slide not hide
    slidesRef.current[slideIndex].removeAttribute("aria-hidden");
    slidesRef.current[slideIndex]
      .querySelector("a")
      .removeAttribute("tabindex");
  };

  useEffect(() => {
    makeSlidesAccessible();
  }, [slideIndex]);

  return {
    /* omit */
  };
};
```

Then, everything works as expected.

<Figure
  alt="Good slideshow screenshot"
  src="/img/blog/accessible-slideshow-with-react/good-slider.gif"
  width={640}
  height={433}
/>

---

### More Readings

- [`tabindex` on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)


Navigate slideshow, slider, carousel with keyboard. Slideshow, carousel for keyboard users.

Accessible Slideshow, Slider, Carousel with React

Accessible Slideshow with React


I thought I knew how to use Flexbox to put a footer at the bottom until I read [@5t3ph](https://twitter.com/5t3ph)'s "[ModernCSS 01](https://moderncss.dev/keep-the-footer-at-the-bottom-flexbox-vs-grid/)". I used to wrap `<header>` and `<main>` in a `div` together along with a `<footer>` then add `justify-content: space-between;` on the body to make `<footer>` at the bottom. But Stephanie's solution is using `margin-top: auto;`! It's extremely inspiring.

To figure out this one trick I learned and discovered more things.

By the way, this is my solution, it's not bad, but it could be better.

<Figure
  alt="Footer at The Bottom with CSS Flex"
  src="/img/blog/put-footer-at-the-bottom-with-flexbox/01-footer_at_bottom.jpeg"
  width={1650}
  height={600}
/>

- I've learned from Josh W Comeau's [CSS course](https://css-for-js.dev/) that flexbox is a completely different layout mode than "the normal one". And **margins don't collapse on flexbox**.
- For block level elements (with certain width size), the `auto` value of margin would take up all available space in the given direction (left/right). This is why we use `margin: 0 auto;` to center a block element.
- Because there's no margin collapse on flexbox, when apply an `margin-top: auto` to an flexbox element, the margin would horizontally take up that available space, just like the vertical effect on block elements. This is why there's a `margin-top: auto;` trick in Stephanie's solution.

In [this pen](https://codepen.io/cyishere/pen/xxdYGwo) I put in an `article` block with `margin-left: auto;` for compare.

I hope this article could help people know more about CSS flexbox.


Put Footer at The Bottom with CSS Flexbox


Last month when I was trying to look for a job and was afraid to take the first step, I immersed myself in building some practical frontend projects. I tried some [Frontend Mentor's challenges](https://www.frontendmentor.io/profile/cyishere), but I am not sure whether they're practical enough. So I decided to be a copycat and cloned [bejamas.io](https://bejamas.io), actually only the home page (the version before they updated their website at July 15, 2021). Bejamas is very beautiful and elegant in detail; I discovered it a year ago whilst looking up "what is jamstack" and instantly fell in love with this beautiful website. With a live website, I thought it would be definitely practical.

<FlexCenter>
  [Live Demo Page](https://bejamas-clone.vercel.app/)[Code on
  GitHub](https://github.com/cyishere/bejamas-copycat)
</FlexCenter>

So I took Bejamas' home page as a design template and cloned it with [Next.js](https://nextjs.org/), [styled-components](https://styled-components.com/), and [Sanity](https://www.sanity.io/) for the "services" and "blog posts" sections (taste some jam). I avoided looking at their source code except copied the CSS code for the box shadow and gradient (😬). It took me an unexpectedly long time to complete it, and some parts are still unfinished.

I've learned a lot during the production process. The following are the lessons:

## Mobile-first, but not too first

I've been reading articles about the mobile-first principle. As designers say it's "[progress advancement](https://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00)". "First, we build a version for the relatively lower browser which includes the most basic functions and features. Then add interactions, more complicated effects on the basic version for tablet or PC." So I followed this principle to start, then I kinda stuck myself in a corner.

Because I didn't consider the complexity of the desktop version when I started structuring the DOM. That means I'll have to create a completely new DOM structure for a larger screen rather than relying on CSS to do the fancy responsive work. So after spending a significant amount of time refactoring my code, I ended up using three `<header>`s and letting the media query in CSS decide which one would be displayed which other two would be `display: none;`. I think it's a little messy.

The lesson I've learned here is **although starting with mobile-first, I need to think in the big picture, consider all the variants rather than "abandoning" the version for larger screens at first.**

Notes: I attempted to use [react-responsive](https://github.com/contra/react-responsive), but due to SSG in Next.js it became a bit tricky. Here's [an article about server-side rendering and responsive design](https://nitayneeman.com/posts/combining-server-side-rendering-and-responsive-design-using-react/). I'd also like to try the dependency [fresnel](https://github.com/artsy/fresnel).

## Plan first and document well

I tried to implement the concept of re-usable components in this project as much as possible. During coding, I assigned multiple tasks to one component, such as there's a `<TwoColumns />` component displayed as grid, because I wanted it to be used in every situation, I put several props on it. Then I forgot what they were and when I was supposed to use which...🤦🏻‍♀️

The lesson I've learned here is similar to the first one which **I need to plan ahead of time, consider all of the possibilities, and write document for them.**

There are several tools for writing documents for React projects; however, because this project is small, I decided to convert it to TypeScript in order to use types to specify variant props. (I could use `prop-types`, but I like TypeScript more and want to use it as much as possible. 😄)

## Round dashed gradient border

<Figure
  alt="Round dashed gradient border of bejamas.io"
  src="/img/blog/what-ive-learned-from-being-a-copycat/round-dashed-gradient-border.png"
  width={980}
  height={279}
/>

Bejamas wraps some logos with a round dashed gradient border. It's a minor aesthetic detail, but I spend a lot of time on it, despite the fact that the solution is quite simple. I didn't find the right approach at first. And I put it here: **`border-image` cannot create a round border.**

There're two solutions for this style, which I put in a [Codepen](https://codepen.io/cyishere/pen/RwpXMGy). I used the second one in this project.

The first is to use a full-color pseudo-element and place it beneath the main element. The main element has a dashed border that matches its background. As a result, the dashed border's gaps reveal the gradient color beneath, giving the appearance of a round dashed gradient border. The key here is to use `background-clip: padding-box;`.

The second is similar to the first, but instead of layered elements, it employs _layered background images_. With the help of `background-clip` the top layer of the background images lets the dashed border reveal the gradient image beneath and produce the same effect as the first one.

Both solutions are straightforward; what matters here is finding the right "mental model". But what I've learned is beyond it: **we shouldn't be afraid of something that appears difficult because it may turn out to be simple once we get our hands dirty.** （Now, I need to figure out the right mental model for the jar animation in the hero section; still don't know how to make it...😑)

## Looping LEGO animation

On Bejamas' home page, right after the "round dashed gradient border" section there's a looping animation that stacks three lego blocks on top of each other again and again and again, to infinity and beyond.

The tricky part is that the "boxes" in CSS are a one-way stack. How could I manage to stack the first one on top of the last? From the second loop something that shouldn't have happened occurred as shown in the picture below.

<Figure
  alt="The first block cannot on top of the last one"
  src="/img/blog/what-ive-learned-from-being-a-copycat/the-1st-cannot-stack-on-top-of-the-last.jpg"
  width={600}
  height={400}
/>

I considered using JavaScript to modify their `z-index` property but it seems too complicated...So in the end, I came up with a filler which is an extra block to cover up the top of the purple block. With the `animation-delay: 4s;` the filler starts at the second loop. [Here's my code](https://github.com/cyishere/bejamas-copycat/blob/main/components/Lego/Lego.tsx).

<Figure
  alt="Using a filler to cover up the purple one"
  src="/img/blog/what-ive-learned-from-being-a-copycat/the-solution.jpg"
  width={600}
  height={400}
/>

It's perfectly functional. Despite the fact that I don't know how to set up an `animation-timing-function` to achieve that little pause move, I thought this solution was cool until I read Bejamas' code...🤦🏻‍♀️ Here's the code of Bejamas:

```css
@keyframes loading {
  0% {
    opacity: 0;
    transform: translateY(-70px);
    z-index: 10;
  }
  10% {
    opacity: 1;
  }
  40% {
    transform: translate(0);
    z-index: 1;
  }
  75% {
    opacity: 1;
    transform: translateY(24px);
  }
  to {
    opacity: 0;
    transform: translateY(70px);
  }
}
```

They change the `z-index` during animation! I had no idea `z-index` could be modified in animation! Then I found out that there're [tons of CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties), not just those pertaining to position (2 dimensions) and appearance, are animatable. Even `flex` and `grid` are animatable!

Why didn't I look into if `z-index` could be animated? I just didn't...

Apparently what I've learned here is code - CSS animation. But, aside from that, I have a feeling there's something else I should be concerned about, and that is **thinking outside the box**. To be a good developer, I still have a long way to go.

## Unfinished parts

Here're some parts in Bejamas' home page I haven't achieved:

- The jar animation in the hero section;
- The "check web vitals" section;
- The blurry effect of the button in the header when it pops in or out;
- The ball pit animation at the bottom of the "Buiding the web" section;
- The blur translucent background of the header;

---

Whilst I was writing this summary blog post I read Josh Comeau's article "[how to learn stuff quickly](https://www.joshwcomeau.com/blog/how-to-learn-stuff-quickly/)". I think that learning from creating a clone of a live website is similar to what he meant by "mixing guided and unguided learning". Making alternative solutions and intentional mistakes in order to learn and cultivate a mindset, rather than simply following along with something.


css round dashed garient border,css loop animation, frontend structure plan, re-usable components, frontend mobile-first

What I've Learned from Being a Copycat


## Export Multiple Components

When I structure a React app, I'd like to put the components which are in the same category but with different styles in the same folder. Something like this:

```bash
/- components
	/- Card
		/- CardLeftMedia.js
		/- CardRightMedia.js
		/- CardTopMedia.js
```

So, I need to import & export them in a `index.js` file. Here's the simple solution:

```javascript
// components/Card/index.js

export { default as CardLeftMedia } from "./CardLeftMedia";
export { default as CardRightMedia } from "./CardRightMedia";
export { default as CardTopMedia } from "./CardTopMedia";
```

They're _named exports_, and I import them with curly braces:

```javascript
// pages/Home.js

import { CardLeftMedia } from "../components/Card";
```

## Export One Component as Default

There's another scenario like this:

```bash
/- components
	/- Card
		/- Card.js
		/- Card.module.css
```

To export `Card.js`, I also add an index file:

```javascript
// components/Card/index.js

export { default } import "./Card";
```

It's a default export and I could import it directly:

```javascript
// pages/Home.js

import Card from "../components/Card";
```

---

### More information about ES6 modules:

- [ECMAScript 6 modules: the final syntax](https://2ality.com/2014/09/es6-modules-final.html)
- [`export` on MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export)


ES6 modules, JavaScript modules & how to export/import modules

Export Multiple Components in Index File


I use Next.js & MDX for my personal website and some documents, I want to display a "table of contents", a list of headings, for each article.

I've tried the plugin [remark-toc](https://github.com/remarkjs/remark-toc) but it's too complex (for me). I spend hours still couldn't make the toc work... So, I tried to write it by myself.

## Get The List of Headings

Here's the code for getting the list of headings:

```javascript
// ./components/PostLayout.js

import { renderToString } from "react-dom/server";
import { MDXProvider } from "@mdx-js/react";

import MDXComponents from "./MDXComponents";

const PostLayout = ({ children }) => {
  const contentString = renderToString(children);

  const getHeadings = (source) => {
    const regex = /<h2>(.*?)<\/h2>/g;

    if (source.match(regex)) {
      return source.match(regex).map((heading) => {
        const headingText = heading.replace("<h2>", "").replace("</h2>", "");

        const link = "#" + headingText.replace(/ /g, "_").toLowerCase();

        return {
          text: headingText,
          link,
        };
      });
    }

    return [];
  };

  const headings = getHeadings(contentString);

  return (
    <>
      {/* ... */}

      {headings.length > 0 ? (
        <ol>
          {headings.map((heading) => (
            <li key={heading.text}>
              <a href={heading.link}>{heading.text}</a>
            </li>
          ))}
        </ol>
      ) : null}

      <MDXProvider components={MDXComponents}>
        <Container>{children}</Container>
      </MDXProvider>
    </>
  );
};
```

## Add IDs to Headings

I use the `MDXProvider` to render the Markdown content, then customize the components in a separated file.

Here's the customized `h2`:

```javascript
// ./components/MDXComponents.js

const Heading2 = ({ children }) => {
  const idText = children.replace(/ /g, "_").toLowerCase();

  return <h2 id={idText}>{children}</h2>;
};

const MDXComponents = {
  h2: Heading2,
  // ...
};

export default MDXComponents;
```

Now, everything works as I expected. I made a Next.js & MDX starter, [click here to visit the repo](https://github.com/cyishere/nextjs-starter) could find the whole code.


Add a table of contents for MDX/Markdown file with Next.js.

Table of Contents for MDX with Next.js


Accutally this is about the logic of "auth", because there're two parts in it: "authentication" and "authorization".

First of all, let me clear the difference between these two concepts.

**Authentication**: You are who you say you are.

**Authorization**: You can do what you want to do.

## Authentication

When a user tries to log in, we need to find out who the user really is, this is "authentication". The logic of this is we get the information the user gives us, such as the user's name and password, we compare this info in our database to find out whether there's a user who has the same data. If there is, then the user is "authenticated".

After we verify the user is really who she is, we give her a encode string which is known as a "token". The token is her passport in our app.

That is the "authentication" flow. A graph shows blew.

<Figure
  alt="The logic of authentication"
  src="/img/blog/auth-with-express-and-react/authentication.png"
  width={1920}
  height={1080}
/>

### Authentication Logic with Code

In the frontend, when the user clicks the "Login" button, the frontend sends a POST request to the backend.

```javascript
// ./client/src/components/LoginForm.js

const loginSubmit = (e) => {
	e.preventDafault();

	return fetch("https://localhost:5000/api/user", {
		method: "POST"
		headers: { "Content-Type": "application/json" },
		body: JSON.stringify({ name, password }),
	})
	.then(response => response.json())
	.then(result => {
		if (result.type !== "error") {
			// login success
		} else {
			// show error messages
		}
	})
	.catch(err => {
		// show error messages
	});
};
```

When backend receives the login request, it checks the info in database, then returns error messages or authenticated token. ([Here's an article about error handling logic](https://cyishere.dev/blog/error-handling-with-expressjs).)

```javascript
// ./server/routes/user.js

const router = require("express").Router();
const jwt = require("jsonwebtoken");
const { users } = require("../utils/data");
const SECRET = "thisSupposeToBeSecrectNotForPublic";

/**
 * @feature Login
 * @route POST /api/user
 * @access Public
 */
router.post("/", async (req, res, next) => {
  try {
    const { name, password } = req.body;

    // check if there are name and password
    if (name.trim() === "" || password.trim() === "") {
      const error = new Error("Name and password must not be empty.");
      error.statusCode = 400;
      throw error;
    }

    // check is there's a user in the database
    const user = users.find((u) => u.name === name);
    if (!user) {
      const error = new Error("No such user.");
      error.statusCode = 400;
      throw error;
    }

    // check whether the password is correct
    if (password !== user.password) {
      const error = new Error("Incorrect password...");
      error.statusCode = 400;
      throw error;
    }

    // if authenticated, generate a token
    const token = jwt.sign({ name }, SECRET);

    // return the token and user id
    res.json({
      userId: user.id,
      token,
    });
  } catch (error) {
    next(error);
  }
});

// profile: choose the right task, you'll see your profile

module.exports = router;
```

When the frontend gets the returned userId and token, it could keep them in the browser's cookie or local storage, but in this example, I put them in the state for further usage. [Click here](https://github.com/cyishere/auth-with-express-and-react/blob/main/client/src/components/LoginForm.js) to see the whole code in the frontend login logic.

Now the user has the "token" passport, if she wants to access some information she needs to **make the request with the token**, so the backend server could check her identity. This kind of logic is "authorization".

## Authorization

In my example, after the user logged in the screen shows her profile. The code for this behavior is sending an HTTP request along with the token in the HTTP header. Before we jump to the actual code, let's see a graph about the whole logic.

<Figure
  alt="The logic of authorization"
  src="/img/blog/auth-with-express-and-react/authorization.png"
  width={1920}
  height={1681}
/>

### Authorization Logic with Code

1. Send HTTP request in frontend

```javascript
// ./client/src/components/Profile.js

// ...

const Profile = ({ userId, token }) => {
  const [user, setUser] = useState(null);
  const [message, setMessage] = useState(null);

  const getUserInfo = (tokenPassport) => {
    return fetch(`${api}/${userId}`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + tokenPassport, // send the token in request header
      },
    })
      .then((response) => response.json())
      .then((result) => {
        if (result.type !== "error") {
          setUser(result.user);
          setMessage(null);
        } else {
          setMessage(result.message);
        }
      })
      .catch((error) => {
        setMessage(error.message);
      });
  };

  useEffect(() => {
    if (!user) {
      getUserInfo(token);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [user, token]);

  // ...
};
```

2. In the backend server, first to check whether the token is valid in a middleware

If it's an invalid user, she can't do what she cannot do.

```javascript
// ./server/utils/middlewares.js
const jwt = require("jsonwebtoken");
const { SECRET } = require("./helpers");
const { users } = require("./data");

/**
 * Authorization
 */
// define a error helper
const unauthorizedError = (errorMsg) => {
  const error = new Error(errorMsg);
  error.statusCode = 403;
  throw error;
};

const auth = (req, res, next) => {
  try {
    // check whether there's authorization property in the request header
    const reqHeaderAuth = req.header("Authorization");
    if (!reqHeaderAuth) {
      unauthorizedError("No authorization...");
    }

    // get the token string,
    // if the format of the token is not right,
    // jsonwebtoken will throw an error
    // with "jwt malformed" message
    const token = reqHeaderAuth.split(" ")[1];

    // verify the token with our "secret"
    // if the token is invalid,
    // jsonwebtoken will throw an error,
    // such as an "invalid signature" message
    const decoded = jwt.verify(token, SECRET);

    // this `decoded` is an object contains one property we defined in the login method: { name }
    // check whether there's a user with this name in our database
    const user = users.find((u) => u.name === decoded.name);
    if (!user) {
      unauthorizedError("Invalid token...");
    }

    // when authorized, assign the user id to the `request`
    req.userId = user.id;

    next();
  } catch (error) {
    next(error);
  }
};
```

Now we know this is a valid user who is in our database, let's get some further information.

3. Check whether the user is authorized in a specified endpoint

```javascript
// ./server/routes/user.js

// ...
const { auth, unauthorizedError } = require("../utils/middlewares");

// ...

/**
 * @feature Get user's profile
 * @route GET /api/user/:id
 * @access Private
 */
// 🔴 NOTE: put the `auth` middleware here (router argument) to use it
router.get("/:id", auth, (req, res, next) => {
  try {
    // in the data.json, the user ids are number,
    // so convert string to number first
    const userId = Number(req.params.id);

    // we already check the user's identity in the auth middleware
    // now we need to check if the user can see this profile
    if (userId !== req.userId) {
      unauthorizedError("Unauthorized! You cannot see other's profile.");
    }

    // find the user by id in the database
    const user = users.find((u) => u.id === userId);
    delete user.password;

    // return the user info
    res.json({ user });
  } catch (error) {
    next(error);
  }
});
```

Please notice that we put the `auth` middleware in the `router`, because it's a middleware we can use it like this with Express.js. The difference between put it in a specified endpoint router method and in the main `server.js` file, such as `app.use(auth)`, is the latter effects every endpoint route.

Thus, this is the logic of authorization. For more clear I add two behaviors in the example app, 1) see the team members. Every user could see the team members; 2) only Debbie Ocean could make a plan. The whole code of this example is in [this repo](https://github.com/cyishere/auth-with-express-and-react).

- `./client/src/components/Members.js` makes the HTTP request to get all the members (`getUsers`);
- The backend API is in the `./server/routes/user.js` file.
- `makeAPlan` request is in the `./client/src/components/Profile.js` component;
- The backend API is in the `./server/routes/plan.js` file.

These two behaviors in action:

<Video
  src="https://res.cloudinary.com/cyishere/video/upload/v1622445673/cyishere/blog/unauthorized_r1gibh.mp4"
  description="When request is unauthorized."
/>

<Video
  src="https://res.cloudinary.com/cyishere/video/upload/v1622445672/cyishere/blog/authorized_kzcmc2.mp4"
  description="When request is authorized."
/>


What's authentication? What's authorization?

Auth with Express and React


I think error handling is a very tricky part of development. When I started as a self-taught Node.js full-stack developer, I know use `throw new Error` would throw out the errors in the terminal, but I don't know how to let my frontend "know" these errors and show them in the UI for users. I really struggled with this for a while.

In this article, I'll showcase how to handle errors with Apollo Server & Prisma, then show the error messages in the frontend with Apollo Client & React. Thus, the users could know what is happening thereby adjust their inputs.

I'll make a register form as demonstration.

<Figure
  src="/img/blog/error-handling-with-apollo-and-prisma/register-form-w-errors.jpg"
  alt="Register form with error messages"
  width={1054}
  height={702}
/>

## 1. Setup the Project

Please download [the starter repo](https://github.com/cyishere/error-handling-w-apollo-prisma/tree/starter), it contains the basic server structures and frontend UI.

The main part we concern is the register mutation in the `resolvers.js` file, take a look at it:

```js
// server/graphql/resolvers.js

// ...

Mutation: {
  register: (_, { email, username, password, passconf }, { prisma }) => {
    let errors = {};

    try {
      if (email.trim() === "") errors.email = "Email must not be empty.";
      if (username.trim() === "") errors.username = "Username must not be empty.";
      if (password === "") errors.password = "Password must not be empty.";
      if (passconf !== password) errors.passconf = "Passwords must match.";

      if (Object.keys(errors).length > 0) {
        // now `errors` will throw to the `catch` block
        throw errors;
      }

      const user = prisma.user.create({
        data: {
          email,
          username,
          password
        }
      });

      return user;
    } catch (err) {
      console.log(err);
    }
  },
},

// ...
```

If there're some input errors, we put them in the `errors` object and throw them to the `catch` block. Let's see what would be like when those errors happen.

Start the server and run the `register` mutation, we can see the error messages on the terminal, but nothing on the GraphQL API.

<Figure
  src="/img/blog/error-handling-with-apollo-and-prisma/errors-show-in-terminal.png"
  alt="Errors show in terminal"
  width={686}
  height={259}
/>

<Figure
  src="/img/blog/error-handling-with-apollo-and-prisma/no-error-messages-in-playground.png"
  alt="No error messages show in playground"
  width={1920}
  height={998}
/>

## 2. Add Error Handing in Apollo Server

Let's add some code then.

```js
// server/graphql/resolvers.js

const { UserInputError } = require("apollo-server");

const resolvers = {
  // ...
  Mutation: {
    register: () => {
      let errors = {};
      try {
        // ...
      } catch (err) {
        console.log(err);
        throw new UserInputError("Bad Request", { errors: err });
      }
    },
  },
};

// ...
```

We use the Apollo Server's `UserInputError` error handler to throw the errors to GraphQL API. Now, we can see the messages in the playground:

<Figure
  src="/img/blog/error-handling-with-apollo-and-prisma/error-messages-in-playground.jpg"
  alt="Error messages in Playground"
  width={1920}
  height={1000}
/>

The `UserInputError` method accepts two arguments, the first one usually is a string that could describe the error(<Emoji name="Number One">1️⃣</Emoji>), the 2nd could be the actual messages like what we did, these messages show in the `errors[0].extensions` (<Emoji name="Number Two">2️⃣</Emoji>) of the response. And the 2nd one is optional.

<Figure
  src="/img/blog/error-handling-with-apollo-and-prisma/UserInputError.jpg"
  alt="Code of UserInputError"
  width={775}
  height={135}
/>

Before dive into how Prisma could help us handle the errors, let's wire up with frontend to see how to deal the messages with UI.

## 3. Show Error Messages in React App with Apollo Client

In the frontend, we use the [Semantic UI React](https://react.semantic-ui.com/) to make the demo app more beautiful which is already in the starter repo.

To wire up with the server, let's install Apollo Client.

### 1) Add Apollo Client to Frontend

Install Apollo Client:

```bash
yarn add @apollo/client graphql

# or

npm install @apollo/client graphql
```

Add a new file `./client/src/ApolloProvider.js`, and import it to `./client/src/index.js`:

```js
// client/src/ApolloProvider.js

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

const client = new ApolloClient({
  uri: "http://localhost:4000", // this points to our server url
  cache: new InMemoryCache(),
});

const Provider = ({ children }) => (
  <ApolloProvider client={client}>{children}</ApolloProvider>
);

export default Provider;
```

```js
// client/src/index.js

import React from "react";
import ReactDOM from "react-dom";
import ApolloProvider from "./ApolloProvider";
import App from "./App";
import "semantic-ui-css/semantic.min.css";

ReactDOM.render(
  <ApolloProvider>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
);
```

### 2) Wire Up with the Server

Wire up the `register` resolver with register page.

In the `./client/src/components/RegisterForm.js`, we use the `useMutation` hook from Apollo Client to mutate the data with the server. Code below:

```js
// client/src/components/RegisterForm.js

import { useState } from "react";
import { gql, useMutation } from "@apollo/client";
import { Button, Form, Message } from "semantic-ui-react";

const REGISTER = gql`
  mutation Register(
    $email: String!
    $username: String!
    $password: String!
    $passconf: String!
  ) {
    register(
      email: $email
      username: $username
      password: $password
      passconf: $passconf
    ) {
      id
      username
      email
    }
  }
`;

const Register = () => {
  const [userInfo, setUserInfo] = useState({
    username: "",
    email: "",
    password: "",
    passconf: "",
  });

  const handleChange = (e) => {
    setUserInfo({
      ...userInfo,
      [e.target.name]: e.target.value,
    });
  };

  const [doRegister, { loading, error, data }] = useMutation(REGISTER);

  const registerSubmit = (e) => {
    e.preventDefault();
    doRegister({ variables: { ...userInfo } });
    console.log(userInfo);
  };

  console.log("data:", data);
  console.log("error:", error);

  return (
    <>
      {error && <Message negative>{error.message}</Message>}
      <Form onSubmit={registerSubmit}>{/* omit the form content */}</Form>
    </>
  );
};

export default Register;
```

What have we done in the code?

- Define a GraphQL string with `gql`;
- Pass the `REGISTER` to `useMutation` hook, and get a function `doRegister` and the mutation states: `loading`, `error`, `data`;
- Add a function `registerSubmit` to deal with the form submit, in the function we pass the `userInfo` to the `doRegister` to execute the mutation;
- Add a `Message` component to show the error message, if there is any error.

At this point, when leaving all the four fields empty and click the "Register" button, we'll get the error message, the message is what we write in the `UserInputError` in the `register` resolver, the FIRST argument.

<Figure
  src="/img/blog/error-handling-with-apollo-and-prisma/bad-request.jpg"
  alt="Error message: Bad Request"
  width={981}
  height={785}
/>

<Figure
  src="/img/blog/error-handling-with-apollo-and-prisma/1st-arg-of-UserInputError.jpg"
  alt="The first argument of UserInputError"
  width={775}
  height={135}
/>

If we change the first argument to another string, then the message shows on the UI will change too.

<Figure
  src="/img/blog/error-handling-with-apollo-and-prisma/bad-user-input.jpg"
  alt="Error message: Bad User Input"
  width={1014}
  height={811}
/>

<Figure
  src="/img/blog/error-handling-with-apollo-and-prisma/bad-user-input-in-UserInputError.jpg"
  alt={`"Bad User Input" in UserInputError`}
  width={775}
  height={135}
/>

Then, how could we get the error messages we defined in the `errors` object? We use the options method `onError` of the `useMutaiton` hook:

```js
// client/src/components/RegisterForm.js

// ...

const Register = () => {
  // ...

  const [doRegister, { loading, error, data }] = useMutation(REGISTER, {
    onError: (err) => {
      console.log("onError:", err.graphQLErrors[0].extensions.errors);
    },
  });

  // ...
};

// ...
```

In the browser console, we get these:

<Figure
  src="/img/blog/error-handling-with-apollo-and-prisma/error-messages-in-browser-console.jpg"
  alt="Error messages in browser console"
  width={641}
  height={121}
/>

### 3) Show Error Message in the UI

Let's use the semantic UI field error state to show the messages in our UI.

```js
// client/src/components/RegisterForm.js

// ...

const Register = () => {
  // ...

  // add a new state to store the error messages
  const [errors, setErrors] = useState({
    username: "",
    email: "",
    password: "",
    passconf: "",
  });

  // ...

  return (
    <>
      {error && error.message !== "Bad User Input" && (
        <Message negative>{error.message}</Message>
      )}

      <Form onSubmit={registerSubmit}>
        {/* change the JSX to `Form.Input` */}
        <Form.Input
          // conditional show the label content
          label={errors.username ? errors.username : "Username:"}
          type="text"
          name="username"
          value={userInfo.username}
          onChange={handleChange}
          placeholder="Please input your username"
          // if its status is error
          error={errors.username ? true : false}
        />
        <Form.Input
          label={errors.email ? errors.email : "E-mail:"}
          type="email"
          name="email"
          value={userInfo.email}
          onChange={handleChange}
          placeholder="Please input your email"
          error={errors.email ? true : false}
        />
        <Form.Input
          label={errors.password ? errors.password : "Password:"}
          type="password"
          name="password"
          value={userInfo.password}
          onChange={handleChange}
          placeholder="Please input your password"
          error={errors.password ? true : false}
        />
        <Form.Input
          label={errors.passconf ? errors.passconf : "Confirm Password:"}
          type="password"
          name="passconf"
          value={userInfo.passconf}
          onChange={handleChange}
          placeholder="Please confirm your password"
          error={errors.passconf ? true : false}
        />
        <Button primary type="submit" loading={loading}>
          Register
        </Button>
      </Form>
    </>
  );
};

// ...
```

Now, we click the "Register" button when the fields are empty, we get these:

<Figure
  src="/img/blog/error-handling-with-apollo-and-prisma/register-form-w-errors.jpg"
  alt="Register form with error messages"
  width={1054}
  height={702}
/>

### 4) Complete the Register Page

Continue to add the `onCompleted` option to mutation hook to get the successfully returned data:

```js
// client/src/components/RegisterForm.js

// ...

const RegisterForm = () => {
  // ...
  // add a new state to store the register result
  const [registerResult, setRegisterResult] = useState({
    username: "",
    email: "",
  });

  const [doRegister, { loading, error }] = useMutation(REGISTER, {
    onError: (err) => {
      // ...
    },
    onCompleted: (data) => {
      // when the mutation complete, set the response to `registerState` state
      setRegisterResult(data.register);
    },
  });

  return (
    <>
      {/* ... */}
      <Form onSubmit={registerSubmit}>{/* ... */}</Form>

      {/* when we have the register result, show this: */}
      {registerResult.username && (
        <Message positive>
          <Message.Header>Register Successfully!</Message.Header>
          <p>
            You&#39;re <strong>{registerResult.username}</strong> with{" "}
            <em>{registerResult.email}</em>.
          </p>
          <p>
            Back to <Link to="/">Home page</Link>
          </p>
        </Message>
      )}
    </>
  );
};

// ...
```

### 5) Summary

Sum up our first part of error handling. Using the guard clause concept, we put error messages to an `errors` object and then pass it to the `UserInputError` of Apollo Server.

```js
// server/graphql/resolvers.js

// ...
let errors = {};
try {
  if (email.trim() === "") errors.email = "Email must not be empty.";
  if (username.trim() === "") errors.username = "Username must not be empty.";
  if (password === "") errors.password = "Password must not be empty.";
  if (passconf !== password) errors.passconf = "Passwords must match.";

  if (Object.keys(errors).length > 0) {
    // now `errors` will throw to the `catch` block
    throw errors;
  }

  // ...
} catch (err) {
  throw new UserInputError("Bad User Input", { errors: err });
}

// ...
```

In the front end, we use the `useMutation` hook from Apollo Client to store error messages to a local React state and then show the messages on UI with error status.

```js
// client/src/components/RegisterForm.js

// ...

const Register = () => {
  // ...
  const [errors, setErrors] = useState({
    username: "",
    email: "",
    password: "",
    passconf: "",
  });

  // ...

  const [doRegister, { loading, error }] = useMutation(REGISTER, {
    onError: (err) => {
      // when we get the error messages, we set it to the `errors` state
      setErrors(err.graphQLErrors[0].extensions.errors);
    },
    onCompleted: (data) => {
      // ...
    },
  });

  // ...

  return (
    <>
      {/* ... */}
      <Form onSubmit={registerSubmit}>
        <Form.Input
          label={errors.username ? errors.username : "Username:"}
          // ...
          error={errors.username ? true : false}
        />
        <Form.Input
          label={errors.email ? errors.email : "E-mail:"}
          // ...
          error={errors.email ? true : false}
        />
        <Form.Input
          label={errors.password ? errors.password : "Password:"}
          // ...
          error={errors.password ? true : false}
        />
        <Form.Input
          label={errors.passconf ? errors.passconf : "Confirm Password:"}
          // ...
          error={errors.passconf ? true : false}
        />
        {/* ... */}
      </Form>

      {/* ... */}
    </>
  );
};

export default Register;
```

## 4. Error Handling with Prisma

You could find [the entire code of the above part in here](https://github.com/cyishere/error-handling-w-apollo-prisma/tree/error-handling-without-prisma).

Assume we've already had some users, let's use the [Prisma exceptions](https://www.prisma.io/docs/reference/api-reference/error-reference) to deal with the unique constraint violation.

I define the `email` and `username` fields as **unique** in the `User` model.

```js
// server/prisma/schema.prisma

model User {
  id       Int    @id @default(autoincrement())
  email    String @unique
  username String @unique
  password String
}
```

When we use an existed username to register, we'll get some error messages from Prisma's exception:

<Figure
  src="/img/blog/error-handling-with-apollo-and-prisma/unique-violation-error.jpg"
  alt="Unique violation error messages with Prisma"
  width={1915}
  height={1006}
/>

We could also see the message in terminal:

<Figure
  src="/img/blog/error-handling-with-apollo-and-prisma/unique-violation-error-in-terminal.jpg"
  alt="Unique violation error in terminal"
  width={909}
  height={261}
/>

According to Prisma's documentation, code `P2002` [specifies the unique constraint violation](https://www.prisma.io/docs/reference/api-reference/error-reference#p2002). So we can use it as a condition. Refactor the catch block like this:

```js {6}
// server/graphq/resolvers.js

// ...

} catch (err) {
    if (err.code === "P2002") {
      const field = err.meta.target[0];
      errors[field] = `${field} is already taken.`;
    }
    throw new UserInputError("Bad User Input", { errors });
  }

// ..
```

Now we get the error messages just like before, could use it directly in our frontend without any code changes.

<Figure
  src="/img/blog/error-handling-with-apollo-and-prisma/error-messages-with-prisma.jpg"
  alt="Error messages with Prisma in Playground"
  width={997}
  height={865}
/>

<Figure
  src="/img/blog/error-handling-with-apollo-and-prisma/error-message-with-prisma-on-ui.png"
  alt="Error message from Prisma shows on frontend"
  width={906}
  height={717}
/>

## 5. Conclusion

With the very helpful and various error references in Prisma, we put any kind of error messages in an `errors` object and pass it to the Apollo Server's built-in method `UserInputError`. In this case, the error messages will show in GraphQL API.

In the frontend, with the help of Apollo Client, we could show those messages on our UI.

You could find the final codebase [in this repo](https://github.com/cyishere/error-handling-w-apollo-prisma).


Error handling in a GraphQL API with the help of Apollo and Prisma

Error Handling with Apollo and Prisma


I think error handling is a very tricky part of development. When I started as a self-taught Node.js full-stack developer, I know use `throw new Error` would throw out the errors in the terminal, but I don't know how to let my frontend "know" these errors and show them in the UI for users. I really struggled with this for a while.

In this article, I'll showcase how I deal with error handling in REST API with Express.js.

## Catch Errors in Backend

I use a middleware like this:

```js
const errorHandler = (err, req, res, next) => {
  const statusCode = err.statusCode || 500;

  res.status(statusCode).json({
    type: "error",
    message: err.message,
  });

  next();
};
```

In the business logic, when there's an error occurred, I handle it this way (code below), use the guard clause concept throw the error, and catch it by the middleware.

```js
router.post("/", (req, res, next) => {
  try {
    // register a new user, but the username is already taken
    if (usernameUsed) {
      const error = new Error("The username is taken.");
      error.statusCode = 409;
      throw error;
    }
  } catch (error) {
    // the error will catched by the middleware above and response as an object:
    // { type: "error", message: "The username is taken." } with 409 status code.
    next(error);
  }
});
```

## Show Error Messages in Frontend

In the front end, I use `fetch` to communicate with the server. I don't like `axios` because when there's a non-2xx status code, `axios` just break and cannot show any message from the server. So the code in the frontend is something like this:

```js
const addNewUser = (userInfo) => {
  return fetch("/register", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(userInfo),
  })
    .then((response) => response.json())
    .then((data) => {
      if (data.type === "error") {
        // the `type` we defined in the backend middleware
        alert(data.message);
      }
    });
};
```

Thus, the users could know what is happening thereby adjust their inputs.


Use middleware in Express.js to catch error messages and send them to frontend.

Blog Posts