next-data-pipe

next-data-pipe

Let your data flow in Next.js super easily.

next-data-pipe is a small lib that wraps up dipe (data-pipe) and provides some additional utilies such as (for example in Next.js by lifting static props).

Why would I need this?

This library works perfectly in combination with the next-data-hooks library.

It works by lifliting up all the boilerplate needed for processing static or server data from props to pre-configured processors callbacks.

Installation 🔧

npm install -S next-data-pipe

or 

yarn add next-data-pipe

Usage 💡

This library works as an etension of the data-pipe library, and provides some utilities build in for Next.js projects.

// example.config.js
const { LocalFilesPostProcessor } = require('next-data-pipe/processors');

const config = {
  articles: {
    processors: [
      () => {},
      LocalFilesPostProcessor,
    ]
  }
};

export default config;

We also expose a useConfig utiltiy used to return a direct link to the config file. To use that function it's necessary to first configure the webpack config to properly resolve the config file previously created.

// next.config.js
const { resolveConfig } = require('next-data-pipe');
module.exports = {
  webpack: (config, options) => {
    return resolveConfig(config, { configFilePath: './example.config.js' })
  },
}

And then the actual implementation will look just like:

import { getConfig, readData } from 'next-data-pipe';

const articles = getConfig('articles');
let { data, errors } = readData(articles, {});

You can totally skip this part and just use the next-data-pipe package (as shown below):

import { readData } from 'next-data-pipe';
let { data, errors } = readData({
  processors: [],
}, {});

// or 
import config from '../example.config.js';
let { data, errors } = readData(config.articles, {});

See the example in this repo for some ideas on how to organize your data using preconfigured processors. And check what you can do with the data-pipe package here.