Getting Started

Let's have a look on react-api-fetching in less than 5 minutes.

Installation

Inside your React project directory, run:

# npm
npm install react-api-fetching

# yarn
yarn add react-api-fetching

# pnpm
pnpm add react-api-fetching

Quick Start

In order to use react-api-fetching, we need to define a fetcher function and our APIs set.

Create fetcher function

The fetcher function requires two parameters apiConfig and variables (these parameters can be dynamically defined based on your needs as they do not follow any specific rule). The return value can be either a data or an error.

In this example we will assume that apiConfig and variables follow the following types:

interface ApiConfig {
  path: string
  method: string
}

interface Variables {
  path?: Record<string | number, string>
  search?: any
  body?: any
}

const baseUrl = /* your baseUrl */

export async function fetcher (apiConfig: ApiConfig, variables: Variables) {
  const { path, method } = apiConfig
  const url = new URL(path, baseUrl)

  if ('path' in variables) {
    for (const [key, value] of Object.entries(variables.path)) {
      url.pathname = url.pathname.replace(`:${key}`, value)
    }
  }

  if ('search' in variables) {
    url.search = new URLSearchParams(variables.search).toString()
  }

  const res = await fetch(url.toString(), {
    method: method,
    ...('body' in variables && {
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(variables.body)
    })
  })

  if (res.ok) return await res.json()

  throw new Error("Failed to fetch data.")
}

Define APIs set

Now we will define our APIs set based on the apiConfig's type.

import { createAPIs } from 'react-api-fetching'

export const Api = createAPIs({
  USERS: {
    path: '/api/users',
    method: 'GET',
  },
  UPDATE_USER: {
    path: '/api/users/:id',
    method: 'PUT',
  }
})

Fetch data

After defined fetcher function and APIs set, now is the time we use it inside React code.

import { fetcher } from 'your-fetcher'
import { Api } from 'your-api'

export default function App() {
  return (
    <Api.Provider config={{ fetcher }}>
      <Users />
      <EditUser />
    </Api.Provider>
  )
}

function Users() {
  const { loading, data, error } = Api.useApi('USERS', {
    variables: /* Optional. This is the fetcher's variables */
  })

  return /* your code */
}

function EditUser() {
  const [updateUser, { loading, data, error }] = Api.useMutationApi('UPDATE_USER')

  const handleUpdateUser = async () => {
    const { data, error } = await updateUser({
      variables: { /* This is also the fetcher's variables */
        path: {
          id: /* user's id */
        },
        body: /* user's body */
      }
    })
  }

  return /* your code */
}

That's all. Enjoy your coding!