next-data-pipe v0.0.7
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.