Library to make API route fetching easier

[Janpot]

Hi, all. Decided to share a little project I've been working on lately. next-rpc makes exported functions from API routes accessible in the browser. Just import your API function and call it anywhere you want. This reduces boilerplate and makes working with API routes and typescript effortless.

Example

Define your API routes as follows:

// /pages/api/countries.js
export const config = { rpc: true }; // enable rpc on this API route

// export a function that needs to be called from the server and the browser
export async function getName(code) {
  return db.query(`SELECT name FROM country WHERE code = ?`, code);
}

Now in your components you can just import getName and call it client side:

// /pages/index.js
import { getName } from './api/countries';

export default function MyPage({ initialData }) {
  const [countryName, setCountryName] = React.useState(initialData);

  return (
    <button onClick={() => getName('BE').then(setCountryName)}>
      {countryName || 'click me'}
    </button>
  );
}

Under the hood, next-rpc will generate an API route handler for all your exports and a fetch call for all your imports in the browser.

Context

But wouldn't this hide the next.js context? How would I do authentication? next-rpc/context, a second part of this library makes the next.js context available everywhere by leveraging Node.js new AsyncLocalStorage. It wraps all getServerSideProps, getInitialProps and API handlers with an AsyncLocalStorage and stores the request context. This context can then be used in all downstream code:

// ./pages/api/myRpc.js
import { getContext } from 'next-rpc/context';
import { getSession } from '../lib/auth';

const config = { rpc: true };

export async function currentUser() {
  const { req } = getContext();
  // req now contains the request object that initiated the cal to this function.
  // either comes from an API handler, getServerSideProps, or getInitialProps
  const session = getSession(req);
  if (!session) throw new Error('Unauthenticated');
  return getUserFromRequest(req);
}

Installation

Just wrap your next.config.js with next-rpc and you're good to go

// ./next.config.js
const withRpc = require('next-rpc')({
  // Enable if you want to use context API
  // experimentalContext: true,
});
module.exports = withRpc({
  // your next.js config goes here
});

[webdeb]

@Janpot I like this idea. This remembers me on blitz.js. However, I like that this is a lib not a whole framework.
Is it possible to load data on rendering (client/server)?