DEV Community: 👺Mervyn

The Redux Toolkit Pattern

👺Mervyn — Wed, 08 Sep 2021 13:15:37 +0000

Redux Toolkit has been around for a while now. It's still the same state manager we love with a kinda new pattern but still familiar and less overhead a.k.a it's "baggage"!

Since it's 2021, RTL and typescript are perfect together. It would be a crime not to use it together.

We Begin!

Start with installing Redux and RTL to React.
npm install @reduxjs/toolkit react-redux

The Pattern

As it always is, we start with our store file.
Create the file inside app folder, which path will look like src/app/store.ts. Then lets import configureStore

import { configureStore } from '@reduxjs/toolkit'

// export the store so we can pass it to our Provider wrapper
export const store = configureStore({
  reducer: {},
})

// Notice that we are exporting inferred typing to be used later for some cool type hintings 
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

Now, don't forget to wrap your whole app with Redux Provider

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { store } from './app/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Hooks

Before we move on, remember the types we exported from the store earlier? We are going to use that to type charge the hooks for dispatch and selector

src/app/hooks.ts

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import { AppDispatch, RootState } from './store'

export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

With these you'll get typing on what ever you put into your reducer and initial state when using the Redux hooks

Slice

Slice is just where your reducer and action is going to be if your still thinking of classic Redux pattern.

The recommended file structure should follow this file structure pattern features/counter/counterSlice.ts

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

export interface CounterState {
  value: number
}

const initialState: CounterState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload
    },
  },
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

Then we add the slice to our store
app/store.ts

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
})

Usage

import React from 'react'
import { useAppSelector, useAppDispatch } from '../../app/hooks'
import { decrement, increment } from './counterSlice'

export function Counter() {
  const count = useAppSelector((state) => state.counter.value)
  const dispatch = useAppDispatch()

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

🚀React Apollo | Optimistic Response! 🔮

👺Mervyn — Wed, 02 Jun 2021 12:09:51 +0000

One of my favorite things about Apollo Client is it's caching. Storing an already fetched data to prevent any unnecessary network calls, allowing you to build a more responsive React App!

What is an Optimistic Response

An Optimistic Response is a way to respond to any mutation pre-emptively to our frontend before getting the server's response. In a way we are predicting🔮 the future!!!

Allowing us to rewrite the cache base on what we know the backend might send back, taking advantage of Apollo's caching!

Updating the cache

When calling a useMutation hook the second argument takes in options where in you can have an access to a number of callbacks. Where you can do something depending on the state of your network call e.g onError, onComplete, variables, update, etc.

Here is the perfect place where we can manipulate our cache.

optimisticResponse

But first we need to pass in an optimisticResponse, this the pre-emptive data you'll provide to be written in the cache.

I usually separate where I declare my variables and optimisticResponse to the mutation function. Like so.

const [post, postRes] = useMutation(CREATE_POST)

const submitHandler = (e) => {
    e.preventDefault()
    if (body.trim() !== '') {
    // Mutation Function  
    post({  
      variables: { body },
  // Here is where I like to declare what my 'Post' should look like  
        optimisticResponse: {
          createPost: {
            body,
            username: session!.username,
            createdAt: new Date().toISOString(),
            comments: [],
            likes: [],
            // You will have to assign a temporary Id. Like so
            id: 'Temp_ID',
            __typename: 'Post',
          },
        },
      })
    }
  }

NOTE: The temporary id you've assigned will be rewritten after the actual response comes back, assuming the network call is successful. So be wary of rerenders!

Now we can have access to that optimisticResponse to write to our cache.

We will be using the update callback. It is triggered the moment you execute the mutate function.

const [post, postRes] = useMutation(
    CREATE_POST,
    {
      // data is where we can access the optimisticResponse we passed in earlier 
      update: (cache, { data }) => {
        // Get the current cached data. 
        const existingPosts = client.readQuery({
         // The cached query key is the same as the name of the GQL schema
          query: GET_POSTS,
        })
        // Now we combine the optimisticResponse we passed in earlier and the existing data
        const newPosts = [data.createPost, ...existingPosts.getPosts]
        // Finally we overwrite the cache
        cache.writeQuery({
          query: GET_POSTS,
          data: { getPosts: newPosts },
        })
      }
    }
  )

Update using GraphQL Fragments

Now in some cases you need to update a single item. Doing the above example is going to be quite expensive! In order to achieve this we are gonna need the help of GQL Fragments.

What is a GraphQL fragment?

Simply it is a piece of logic that can be shared between multiple queries and mutations. We can extract repeating patterns in our GQL schema.

In this example most of my queries and mutations has this repeating schema for a Post. It would be better to put it on a fragment like this.

import { gql } from '@apollo/client'

export const PostFragment = gql`
  fragment PostParts on Post {
    id
    body
    createdAt
    username
    likes {
      username
    }
    comments {
      id
      body
      username
      createdAt
    }
  }
`

And apply it to every query and mutation that needs this. Like so.

// Spreading it like an object
export const COMMENT_POST = gql`
  ${PostFragment}
  mutation CommentPost($postId: ID!, $body: String!) {
    createComment(postId: $postId, body: $body) {
      ...PostParts
    }
  }
`

We will need a fragment so we can individually select an item we want to update

Updating cache using Fragment

 const [comment, commentRes] = useMutation(COMMENT_POST, {
    update: (cache, { data }) => {
      // We will take the post we wanted to update using readFragment. 
      const post = cache.readFragment({
        // From here we pass in the Id next to whatever you named
        // your cached data. Then the name of the fragment you've created.
        id: `Post:${data?.createComment.id}`,
        fragment: PostFragment,
      })

      // Then, we update it using writeFragment.
      cache.writeFragment({
      // Same as when you read the individual item
        id: `Post:${data?.createComment.id}`,
        fragment: PostFragment,
      // Updating the contents
      // In this example I'm just spreading the existing contents, then rewriting the comments with the data we passed from the optimisticResponse.
        data: {
          ...post,
          comments: data?.createComment.comments,
        },
      })
    }
  })

This way we can just touch the item we want instead of overwriting the whole cached data!

Now you'll have a near instantaneous UX, provided that your confident in your servers!

Conclusion

When I started learning async data, I was so amazed when I'm implementing a loading animation. But If your the user that is just plain annoying to see every where and make the UX feels sluggish.

Pre-emptively providing something to the UI make a lot of difference to the feel of responsiveness of an app. Both Apollo for GraphQL and React Query for RestAPI are definitely gonna be my go to!

React Context Custom Hook | The only Global State you'll ever need

👺Mervyn — Sat, 01 May 2021 15:37:20 +0000

With a bunch of state management library out there. All you need is something you already have. React Context with the help of hooks can be your go-to for smaller project.

Making custom hooks is one of React concept you will need to know.
Lately I have been using a custom hook to handle my global state for ease of use.

Custom Hook

Here is an example.

Always name your custom hook starting with use, so react will treat it as a hook.

`useCtxDark.jsx`

import { useState, createContext, useContext, useMemo } from 'react'

const darkContext = createContext(null)

export const DarkProvider = ({ children }) => {
  const [dark, setDark] = useState(false)

  const darkValue = useMemo(() => [dark, setDark], [dark])

return 
  <darkContext.Provider value={darkValue}>
    {children} 
  </darkContext.Provider>
}

export default function useCtxDark() {
  return useContext(darkContext)
}

In our custom hook we define our createContext(), and a state either useState or useReducer where we store data. Then we store that data to memoize it in useMemo to reduce re-renders.

Notice that we have 2 exports. A named export which is gonna be our Provider that wraps our app and a default export which is our hook that is used to get and set our data.

Now we setup it up by wrapping our app with our Context Provider

`App.jsx`

import { DarkProvider } from '@/hooks/useCtxDark'

export default function App() {
  return (
    // Wrapper
    <DarkProvider>
      <Nav />
      <Pages />
    </DarkProvider>
  )
}

Then we us it like a hook and have access to the global state where ever we call this hook.

`DarkToggle.jsx`

import useCtxDark from '@/hooks/useCtxNav'

const Nav = () => {
  const [dark, setDark] = useCtxDark()

  return <input type='checkbox' onChange={() => setDark(!dark)} />
}

Here is an example using `useReducer`

import { useReducer, useContext, createContext, useMemo } from 'react'

const globalContext = createContext(null)

const initialState = {
   todo: []
}

const reducer = (state, action) => {
   switch (action.type) {
    case "ADD":
      return { todo: [...state.todo, action.payload] };
    case "DELETE":
      const filltered = state.todos.filter((x) => x.id !== action.payload)
      return {
        ...state,
        todos: [...filltered],
      }
    default:
      return state;
  }
}

export const GlobalProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState)

  const stateValue = useMemo(() => [state, dispatch], [state])

return 
  <globalContext.Provider value={stateValue}>
    {children} 
  </globalContext.Provider>
}

export default function useCtxDark() {
  return useContext(globalContext)
}

And you can make multiples of these together when you need more!

`Providers.jsx`

import { DarkProvider } from '@/hooks/useCtxDark'
import { NavProvider } from '@/hooks/useCtxNav'

const Providers = ({children}) => {
  return(
    <DarkProvider>
      <NavProvider>
        {children}
      </NavProvider>
    </DarkProvider>
  )
}

Multi-Context

Another version, where you make a separate context for your state and dispatch.

`useStore.jsx`

import { useState, createContext, useContext, useMemo } from 'react'

const storeContext = createContext(null)
const dispatchContext = createContext(null)

export const StoreProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState)

return 
  <dispatchContext.Provider value={dispatch}>
   <storeContext.Provider value={state}>
    {children}
   </storeContext.Provider> 
  </darkContext.Provider>
}

export function useCtxStore() {
  return useContext(storeContext)
}

export function useCtxDispatch() {
  return useContext(dispatchContext)
}

Then import just the hook for store

import {useCtxStore, useCtxDispatch} from './useStore'

const Component = () => {
  const {todos} = useCtxStore()
  const dispatch = useCtxDispatch()

  const clickHandler = (id) => {
    dispatch({type: '', payload: id})
  }

  return(
    <ul>
     {todos.map((item) => 
       <li key={item.id} onClick={() => clickHandler(item.id)}> 
         {item.name}
       </li> 
     )}
    </ul>
  )
}

Here is a live example with all the above hooks

If your planning to do get some asynchronous data. I do recommend that you use a library for data fetching like React Query or SWR for better UX and Dev Exp.

A perfect pair to React Context for a light weight State Management for both Global and Synchronous State!

Manage Asynchronous State in React with EASE

👺Mervyn — Thu, 22 Apr 2021 04:55:05 +0000

Earlier when I started learning React I always turn to Redux w/ Thunk as my go to State Management specially when I'm trying to fetch asynchronous data.

When doing my small projects I always start setting things up with the Redux store.js, the reducers, and initialState. A bit tedious setup but it is still tolerable, but when you find your self handling a few GET request here, a bit of POST request there and you a mass a collection of ACTION and REDUCER combo.

REDUCER is where you handle the state. And where we can keep track if our data is still "loading state" or something went wrong "error state" depends what our ACTION dispatched

export const productListReducer = (state = { products: [] }, action) => {
  switch (action.type) {
    case PRODUCT_LIST_REQUEST:
      return { loading: true, products: [] }
    case PRODUCT_LIST_SUCCESS:
      return { loading: false, products: action.payload }
    case PRODUCT_LIST_FAIL:
      return { loading: false, error: action.payload }
    default:
      return state
  }
}

ACTION usually an asynchronous function where you handle your "business logic" and dispatch. Your data fetch inside a try catch block so you can also catch errors

export const listProducts = () => async (dispatch) => {
  try {
    dispatch({ type: PRODUCT_LIST_REQUEST })
    const { data } = await axios.get('/api/products')
    dispatch({ type: PRODUCT_LIST_SUCCESS, payload: data })
  } catch (error) {
    dispatch({
      type: PRODUCT_LIST_FAIL,
      payload:
        error.respose && error.respose.data.message
          ? error.response.data.message
          : error.message,
    })
  }
}

React Query

This past few months of my learning journey, a fetching library in react have been repeatedly came up, especially when I started hacking into Next.js, it's either React Query or SWR cause they are quite similar.

So my curiosity got the best of me! Tossed a coined and checked out React Query. It's super simple but complex library that can eradicate lines of code!

So this is how a simple fetch looks with React Query's provided hook useQuery.

The first argument is a unique key and the second is the fetcher function.

 const { isLoading, error, data } = useQuery('products', () =>
     fetch('https://api.shopping').then(res => res.json())
   )

Pro Tip: You can make a custom hook using these so you won't have to write the whole thing every time you use it.

With this hook we can track our loading state, catch errors, and get our data. We just snapped all the boiler plate code that we had to do using Redux out of this universe.

Not only that, one of the major benefit of using a server-state library like React Query is caching your fetched data.

The first argument on useQuery hook is a unique key used to name the cached data. So when your app runs a hook query it checks the cache for the key, if it already exists it will serve you the stored data instantly without fetching it again.

Conclusion

There is a lot more concepts and mind blowing stuff you can do with this library. You can even use this as your GraphQL client instead of Apollo.

But for now I just want you to be aware of this awesome tech. Pairing this with any Client State you prefer would elevate your projects' user experience!

And yes I'am aware of Redux toolkit that removes alot of the overhead setup of an "Old school Redux" but it still not as efficient in handling asynchronous data.

Howler | A basic fullstack Next.js App using its API routes w/ React Query

👺Mervyn — Sun, 28 Mar 2021 05:44:07 +0000

This is not a how to build post, but me writing down what and how I made stuff. A learning journal if you may.

The Stack

Next.js
React Query
TailwindCSS
NextAuth
MongoDB

Design

First of all I almost always start my projects with a design. I'm not a designer but a simple prototype helps me focus. Usually made In Figma.

The design is obviously inspired by twitter. Made this in Figma so that I can have a reference to follow in code as close as I can.

Setup

In this project I want to get my hands dirty with Next.js

Luckily Next.js already have a hefty amount of templates.
So I'm gonna use their with-typescript to save some time, even though adding typescript to it is pretty easy

Initializing the project

npx create-next-app --example with-typescript howler

Typesript
Now I'll just modify my tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"],
      "@/api/*": ["/pages/api/*"],

    },
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

I find it more helpful when learning Typescript to turn on strict mode "strict": true. This forces you to give everything typing's.

Compiler Options this is just my preference to get cleaner looking imports.
Instead of having to type this:

import Example from `../components/Example`

//or worst case.
import Example from `../../../components/Example`

You get this! No matter where you need it.

import Example from `@/components/Example`

Tailwind CSS
A bit annoying at first, but fell in love with this CSS utility based framework.

npm install -D @tailwindcss/jit tailwindcss@latest postcss@latest autoprefixer@latest

// tailwind.config.js
module.exports = {
 purge: [
    './src/pages/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Post Css Config

// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/jit': {},
    autoprefixer: {},
  }
}

Authentication

Implementing Open authentication in Next.js using NextAuth.js.

I'll just link their docs, It's well written!
NextAuth Docs

I will be using Github as my OAuth. Following the docs the session data you get will only include your name, email and image. But I would like to get the users github "tag" added to the session and be able to access in the frontend.

Took me awhile to figure this out but you can get the "tag" and other data from the profile parameter in the jwt callback. Like so.

API side

import NextAuth, { InitOptions } from 'next-auth'
import Providers from 'next-auth/providers'
import { NextApiRequest, NextApiResponse } from 'next/types'
import User from '@/backend/model/userModel'
import dbConnect from '@/utils/dbConnect'
import { customUser } from '@/types/Model.model'

const options: InitOptions = {
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_ID!,
      clientSecret: process.env.GITHUB_SECRET!,
    }),
  ],
  database: process.env.MONGODB_URI,
  session: {
    jwt: true,
  },

  callbacks: {
    //Add userTag to User
    async session(session, user: customUser) {
      const sessionUser: customUser = {
        ...session.user,
        userTag: user.userTag,
        id: user.id,
      }
      return Promise.resolve({ ...session, user: sessionUser })
    },
    async jwt(token, user: customUser, profile) {
      let response = token

      if (user?.id) {
        //Connect to DataBase
        dbConnect()
        //Get User
        let dbUser = await User.findById(user.id)
        //Add UserTag if it doesn't already exist
        if (!dbUser.userTag && profile.login) {
          dbUser.userTag = profile.login
          await dbUser.save()
          console.log('No tag')
        }

        response = {
          ...token,
          id: user.id,
          userTag: dbUser.userTag,
        }
      }

      return Promise.resolve(response)
    },
  },
}

export default (req: NextApiRequest, res: NextApiResponse) =>
  NextAuth(req, res, options)

After that, getting things works in the frontend "assuming the initial setup is done" via a hook to verify and get the session and a link to "Log in" or "Log out".

React side

import { useRouter } from 'next/router'

const Home: FC = () => {
// session - contains our user data , loading - self explanatory
  const [session, loading] = useSession()
  const route = useRouter()

// Redirects you if you are logged in
  useEffect(() => {
    session && route.push('/home')
  }, [session])

// Render if session is loading
  if (loading || session) {
    return (
      <>
        <Head>
          <title>Loading...</title>
          <link rel="icon" href="/pic1.svg" />
        </Head>
        <Loader />
      </>
    )
  }

// Render if there is no session
  return (
    <PageWarp title={'Welcome to Howler'} splash>
      <LoginPage />
    </PageWarp>
  )
}

export default Home

State Management

Using React Context API for application global state to keep track
of states like dark mode or navigation , and used React Query to keep asynchronous data in cache.

Debated using Redux but changed my mind when I heard about SWR and React Query. Ended up using React Query because it has a dev tool that allows you to peek on what data is being cached.

React Query
So this is how it goes.

Like a global state, we have to wrap it our entire app. With the QueryClientProvider and this prop client={queryClient}. Imported from "react-query".

While I'm at it, also add the dev tools overlay


import { QueryClientProvider, QueryClient } from 'react-query'
import { ReactQueryDevtools } from 'react-query/devtools'

//React Query Connection
const queryClient = new QueryClient()

const QState: FC = ({ children }) => {
  return (
    <QueryClientProvider client={queryClient}>
        {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

export default QState

Then we can wrap that around our global state provider.
React Context


import React, { FC, useReducer, createContext } from 'react'
import { InitialHowlState, HowlReducer, howlNav } from '@/types/Howl.model'

import QState from @/components/context/QState

// Create Context
const HowlCtx = createContext<HowlContext>({} as HowlContext)

//Reducer
const howlReducer: HowlReducer = (state, action): InitialHowlState => {
  switch (action.type) {
    //Navigation State
    case 'NAVIGATION':
      return { ...state, nav: action.payload }
    default:
      return state
  }
}

//INITIAL STATE
const initialState: InitialHowlState = {
  nav: 'home',
}

const HowlState: FC = ({ children }) => {
  const [state, dispatch] = useReducer<HowlReducer>(howlReducer, initialState)

  //ACTIONS
  const setNavigation = (nav: howlNav) => {
    dispatch({ type: 'NAVIGATION', payload: nav })
  }

  return (
    <QState >
      <HowlCtx.Provider value={{ state, setNavigation }}>
        {children}
      </HowlCtx.Provider>
    </QState >
  )
}

export default HowlState

Using React Query

Reminder React Query does not replace FETCH API or AXIOS

Fetching Data in React query we use a hook useQuery. It goes like this.

import { useQuery } from 'react-query'
import axios from 'axios'

const App = () => {
const fetcher = async (_url: string) => {
  const { data } = await axios.get(_url)
  return data
}

  // First argument Naming the data to be cached | Second argument your fetcher. Where your fetch api goes. 
   const { isLoading, isError, data, error } = useQuery('name', fetcher('https://api.example'))
 }

More Info in thier docs.

I'll just make a bunch of these as a custom hooks. So you can use them repeatedly.

Typings on useQuery hooks are just like react hooks 'Generics'

import { useQuery } from 'react-query'
import axios from 'axios'
import { HowlT, HowlUser } from '@/types/Howl.model'

export const fetcher = async (_url: string) => {
  const { data } = await axios.get(_url)
  return data
}

export const useGetHowls = (options?: UseQueryOptions<HowlT[]>) => {
  return useQuery<HowlT[]>('howls', () => fetcher('/api/howl'), options)
}

export const useGetHowlById = (_id: string) => {
  return useQuery<HowlT>(['howls', _id], () => fetcher(`/api/howl/${_id}`), {
    enabled: false,
  })

Usage just like any other hooks

import { useGetHowls } from '@/hooks/queryHooks'

const App = () => {
 const { data, isLoading } = useGetHowls()

 return(
  <div>
   {data?.map((howl) => <Howl {...howl}/> )}
  </div>
 )
}

For Updating, Deleting, or Creating posts we will need to use useMutation and making a custom hook for this too. Better explained in their docs. useMutation

First argument should be your fetch function and Second is an object of side effects.

Example below shows a post request with an onSucess side effect that triggers on request success. I made the new posted howl append to the existing cached data setQueryData and invalidate invalidateQueries it to get the latest data.

export const useCreateHowl = () => {
  const queryClient = useQueryClient() 
  return useMutation(
    (newHowl: { howl: string }) => axios.post('/api/howl', newHowl),
    {
      onSuccess: (data) => {
        queryClient.setQueryData<HowlT[]>('howls', (old) => [
          data.data,
          ...old!,
        ])
        // console.log(data)
        queryClient.invalidateQueries('howls')
      },
    }
  )
}

You can also do more optimistic update if your confident on your api, use onMutate side effect, where you manipulate the data even before getting the result from your request either successful or not.

"A" in JAM stack! REST API

Next API Routes
I'll be using next-connect package to mimic Express App syntax instead of using switch.

Before

export default function handler(req, res) {
  switch (method) {
    case 'GET':
      // Get data from your database
      break
    case 'PUT':
      // Update or create data in your database
      break
    default:
     return
  }
}

After

Create a middleware first. Passing in your database connection function to get access to it when using this middleware


import dbMiddleware from './db'
import nextConnect from 'next-connect'

export default function createHandler(...middlewares: any[]) {
                          //Connect to DB
  return nextConnect().use(dbMiddleware, ...middlewares)
}

//API Route
import createHandler from '@/backend/middleware'
//protect is a middleware I made for verifying session login with NextAuth.js
import { protect } from '@/backend/middleware/protect'
import { addHowl, getHowls } from '@/backend/controller/howlController'

const handler = createHandler()

handler.get(getHowls)
handler.post(protect, addHowl)

export default handler

I can also follow MVC design pattern with this like an Express App does, so my API can be more modular.

Controllers looks like this. With comments as a reminder of what they do.

//@desc   Get Howls
//@route  GET /api/howl
//@access Public
export const getHowls = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const howls = await Howl.find({})
      .populate('user', 'name image userTag')
      .sort({ createdAt: -1 })
    return res.status(200).json(howls)
  } catch (error) {
    res.status(404)
    throw new Error('Error! No howls found')
  }
}

Icing in the cake

What's a personal project without some fancy animation?

For most of my project in react I always use Framer Motion. Easy to get started with simple animation like entrance animation or page transition, and you can always up your game with this complex animation framework.

New Features?

Uploading photos. Maybe using AWS S3 bucket or Firestore
Comments
Follow Users

Conclusion

Typescript is awesome🦾 The main hook for TS, is that prevents bugs right in your dev environment, but I like the hinting's more!

React Query is mind-blowing💥 Changes your way of thinking about organizing your global state. Separating your local state and asynchronous make freaking sense!

Next.js is just the 💣 Can't imagine doing react with vanilla create react app anymore. And deploying it in Vercel is just smooth, CICD for someone like me who just want their project to be out there!

Still have A lot more to learn, but I'm having fun!

LINKS

Github Repo
Say Hi! in the Live Demo

DEV Community: 👺Mervyn

The Redux Toolkit Pattern

We Begin!

The Pattern

Hooks

Slice

Usage

🚀React Apollo | Optimistic Response! 🔮

What is an Optimistic Response

Updating the cache

optimisticResponse

Update using GraphQL Fragments

What is a GraphQL fragment?

Updating cache using Fragment

Conclusion

React Context Custom Hook | The only Global State you'll ever need

Custom Hook

useCtxDark.jsx

App.jsx

DarkToggle.jsx

Here is an example using useReducer

Providers.jsx

Multi-Context

useStore.jsx

Here is a live example with all the above hooks

Manage Asynchronous State in React with EASE

React Query

Conclusion

Howler | A basic fullstack Next.js App using its API routes w/ React Query

The Stack

Design

Setup

Initializing the project

Authentication

State Management

Using React Query

"A" in JAM stack! REST API

Icing in the cake

New Features?

Conclusion

LINKS

That is all! Arrivederci!

`useCtxDark.jsx`

`App.jsx`

`DarkToggle.jsx`

Here is an example using `useReducer`

`Providers.jsx`

`useStore.jsx`