This post, and posts like it, are an attempt to share my insights and experience with community.
Pipe functions
A pipe function is not a new concept for people familiar with functional programming. The concept of pipe is simple - it combines n functions. Each function push information downwards transforming into a desired format. It’s a pipe flowing left-to-right, calling each function with the output of the last one.
const double = (num) => num * 2;
const add1 = (num) => num + 1;
pipe(add1, double)(5) // equivalent double(add1(5));
// returns 12
Pipe functions give ability to create small and reusable peaces of code combining together in multiple variations.
The idea of pipe function is pretty simple to understand and to implement in JavaScript. However, there is an interesting challenge around building such a functionality when working with promises and asynchronous data fetching. An even bigger challenge is fit functionality to getServerSideProps.
Let's implement such a function in TypeScript.
Pipe implementation
ssrHelpers.ts
import { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';
export type TPipeGetServerSideProps = (
context: GetServerSidePropsContext,
input: { props: Promise<any> | any }
) => Promise<GetServerSidePropsResult<any>> | GetServerSidePropsResult<any>;
const pipe = (...fns: TPipeGetServerSideProps[]) => async (
context: GetServerSidePropsContext
) => {
let res: GetServerSidePropsResult<any> = {
props: {},
};
for await (const fn of fns) {
res = await fn(context, res);
// it means we have notFound or redirect.
// We need to break our pipe and return this result immediately.
if (!('props' in res)) {
break;
}
}
return res;
};
There are 4 important aspects to understand in this small code snippet:
- By using the spread operator, we can accept an unlimited number of piped functions.
- Each function receives
inputas an argument the resolved value of the previous Promise. - If result execution of piped functions does not have
propsproperty
export type GetServerSidePropsResult<P> =
| { props: P | Promise<P> }
| { redirect: Redirect }
| { notFound: true }
it means we have notFound or redirect. So we need to break our pipe and return this result immediately.
- We end up returning the data in the format Next.js is expecting in getServerSideProps -
GetServerSidePropsResult.
Pipe example usage
export const getServerSideProps: GetServerSideProps = ssrHelpers.pipe(
ssrPipes.withAuth(),
ssrPipes.withSubscription(),
);
The first function will then receive as an argument the Next.js context. It can then proceed to fetch the user session and information based the context object and send along the information to the next function in line:
// we can pass arg as options to piped function
const withAuth = (): TPipeGetServerSideProps => async (
context, input
) => {
const user = await fetchUser();
// if !user -> not auth
// return notFound and break piped functions chain
if (!user) {
return {
notFound: true
}
}
// merge props and pass down to the next function
return {
props: {
...input.props,
user,
}
}
};
The next function passed will then receive the previous function's return value as an argument. It can then proceed to fetch new information and format it to be passed down the chain. In our example, this is our last function, so we will return an object representing the value of our Page's props:
// we can pass arg as options to piped function
const withSubscription = (): TPipeGetServerSideProps => async (
context, input
) => {
const { user } = input.props as { user: TUser;}
const subscription = await fetchSubscription(user.id);
// subscription can be empty
// merge props and pass down to the next function
return {
props: {
...input.props,
subscription,
}
}
};
An unlimited number of functions can then work together to achieve a pipeline of information. The last function is responsible to return the final Props object. This object will then be injected as a prop to the next.js Page component:
const IndexPage: NextPage<TIndexPageProps> = (props) => {
const {
user,
subscription,
albums,
} = props;
return (
<main>
<h1>Index Page</h1>
<p>
user: {JSON.stringify(user)}
</p>
<p>
subscription: {JSON.stringify(subscription)}
</p>
<p>
albums: {JSON.stringify(albums)}
</p>
</main>
);
};
export const getServerSideProps: GetServerSideProps = ssrHelpers.pipe(
ssrPipes.withAuth(),
ssrPipes.withSubscription(),
);
Parallel execution implementation
pipe helper call piped function one after the other sequentially. This may be inefficient if we want to piped several functions that make a request to the server.
We can run this functions in parallel by writing our own helpers inspired by Promise.all.
ssrHelpers.ts
const pipesExecParallel = (...fns: TPipeGetServerSideProps[]): TPipeGetServerSideProps => async (
context,
input
) => {
const promiseArr: (Promise<GetServerSidePropsResult<any>> | GetServerSidePropsResult<any>)[] = [];
fns.forEach((fn) => {
promiseArr.push(fn(context, input));
});
const promiseAllRes = await Promise.all(promiseArr);
let notFoundRes: GetServerSidePropsResult<any> | null = null;
let redirectRes: GetServerSidePropsResult<any> | null = null;
const propsRes: GetServerSidePropsResult<any> = {
props: {},
};
for (let i = 0; i < fns.length; i++) {
const fnRes = promiseAllRes[i];
if ('props' in fnRes) {
propsRes.props = {
...propsRes.props,
...fnRes.props,
};
}
if ('notFound' in fnRes && fnRes.notFound) {
notFoundRes = {
notFound: true,
};
break;
}
if ('redirect' in fnRes) {
redirectRes = {
redirect: fnRes.redirect,
};
break;
}
}
if (notFoundRes) {
return notFoundRes;
}
if (redirectRes) {
return redirectRes;
}
return propsRes;
};
To better understand this code snipped let's remember how works Promise.all. It rejects immediately upon any of the input promises rejecting or non-promises throwing an error, and will reject with this first rejection message / error.
Similar to Promise.all pipesExecParallel take functions and run its with Promise.all under the hood. If one of functions return notFound or redirect it's consider and rejection / error and return this result immediate. Otherwise all functions results merged and pass down to next function in pipe.
Parallel execution example usage
export const getServerSideProps: GetServerSideProps = ssrHelpers.pipe(
ssrPipes.withAuth(), // 500ms
// run two async piped function parallel to minimize fetching data time
ssrHelpers.pipesExecParallel( // 500ms in parallel execution
ssrPipes.withSubscription(), // 500ms
ssrPipes.withAlbums(), // 500ms
),
);
// total 1000ms
Full code example
vborodulin
/
using-pipe-nextjs-get-server-side-props
Using Pipeline pattern to organize code in getServerSideProps or getStaticProps methods of Next.js
Pipe functions
A pipe function is not a new concept for people familiar with functional programming. The concept of pipe is simple - it combines n functions. Each function push information downwards transforming into a desired format. It’s a pipe flowing left-to-right, calling each function with the output of the last one.
const double = (num) => num * 2;
const add1 = (num) => num + 1;
pipe(add1, double)(5) // equivalent double(add1(5));
// returns 12
Pipe functions give ability to create small and reusable peaces of code combining together in multiple variations.
The idea of pipe function is pretty simple to understand and to implement in JavaScript. However, there is an interesting challenge around building such a functionality when working with promises and asynchronous data fetching. An even bigger challenge is fit functionality…
Conclusion
Pipe functions great fits into functional programming react paradigm and helps:
- organize data fetching, validations in getServerSideProps in the one style
- combine small methods with single responsibility in complex getServerSideProps call with
pipehelper - share reusable pipes across pages(withAuth, withUser, withSubscription)
- run pipes in parallel with helper
pipesExecParallel
Top comments (0)