Next JS + SWR + Axios

Next JS adalah Framework Javascript yang berfokus pada SSR yang dibangun berdasarkan Framework React JS. Biasanya dibangun untuk tujuan pembuatan Company Profile ataupun Landing Page.

SWR adalah React Hook untuk fetching data yang direkomendasikan langsung oleh Next JS. Jika React Query hanya untuk React JS sedangkan SWR bisa untuk React JS maupun Next JS.

Bahan yang dibutuhkan:
• Next JS
• SWR
• Axios

Tutorial ini akan dibagi dalam beberapa sesi, yaitu:

• Buat File Axios
• Buat File Service
• Integrasi

Buat File Axios
Fungsi file ini bertujuan untuk sebagai config services, agar mudah mengatur baseUrl maupun token.
services > axios.js

import axios from 'axios'

const instance = () => axios.create({
  baseURL: 'http://localhost:3000/api',
  headers: {
    'Content-Type': 'application/json'
  }
})

const onGet = (url, params) => instance().get(url, { params: params })

export { onGet }

Buat File Service
File service ini berbeda dengan axios, jika axios adalah config nya, maka file service ini adalah yang akan menggunakan config yang mana adalah axios yang tadi sudah dibuat.
Biasanya diletakan dalam satu feature
features > home > service.js
import { onGet } from '@/services/axios'

const onGetGames = async (url, params) => {
  try {
    const send = await onGet(url, params)

    return { status: true, data: send }
  } catch (error) {
    return { status: false, data: error.response }
  }
}

export { onGetGames }

mulailah menggunakan try catch untuk melakukan request

Integrasi
Langkah selanjutnya adalah mulai melakukan integrasi antara config, service dan halaman yang akan ditargetkan untuk me-request data, pada contoh ini kita akan sebut Home.
features > home > Home.js
import useSWR from 'swr'
import { onGetGames } from './services'

const Home = () => {
  const { data: games, error, isLoading } = useSWR('/games', onGetGames)

  if (error) return 'An error has occurred.'
  if (isLoading) return 'Loading...'

  return (
    <section>
      <h1>
        List Gamedua
      </h1>
      <ul>
        {(Array.isArray(games.data.data)) && games.data.data.map((item, itemIndex) => (
          <li key={itemIndex}>{item.name}</li>
        ))}
      </ul>
    </section>
  )
}

export default Home

Pada line:

const { data: games, error, isLoading } = useSWR('/games', onGetGames)

Bila dilihat SWR memiliki bermacam return values, diantaranya yang sering digunakan:
• data = value response dari api
• error = error response dari api
• isLoading = loading ketika melakukan request
SWR juga memiliki 2 parameters mandatory, yang dimana ada:
• key (parameter 1) = berguna untuk mem-parsing url
• fetcher (parameter 2) = service yang akan dieksekusi
Kelebihan
• SWR mampu me-revalidate (melakukan request otomatis) ketika component mount dan windows focus
• Dapat melakukan otomatis revalidate dengan interval
• Dapat melakukan revalidate jika error dan dapat dibatasi
Kekurangan
• Tidak mampu revalidate berdasarkan url yang terupdate

Itu adalah pengenalan singkat bagaimana cara integrasi Next, SWR dan Axios. Jika kalian ingin menggunakan React Query pada Next tapi React Query tidak mendukung maka SWR lah solusinya.