Easily fetch data in your React components, with similar APIs to react-apollo 🎉
npm install react-isomorphic-dataYou can use hooks or HOC, both are supported. 🎉
NOTE: This project is still very much work in progress, use at your own risk ⚠️
yarn add react-isomorphic-data
$3
javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { useData, useLazyData, DataProvider, createDataClient } from 'react-isomorphic-data';const dataClient = createDataClient({
initialCache: window.__cache || {},
ssr: false,
});
const Component = () => {
const { data, loading } = useData('https://pokeapi.co/api/v2/pokemon/3/', {});
return (
This is a Component.
{loading ? (
'loading...'
) : (
{JSON.stringify(data, null, 2)}
)}
);
};ReactDOM.render(
document.getElementById('root')
);
`$3
javascript
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { DataProvider, createDataClient } from 'react-isomorphic-data';
import { getDataFromTree } from 'react-isomorphic-data/ssr';
import fetch from 'node-fetch';import App from './App';
// react-isomorphic-data needs fetch to be available in the global scope
global.fetch = fetch;
const server = express();
server.get('/*', async (req: express.Request, res: express.Response) => {
const dataClient = createDataClient({
initialCache: {},
ssr: true,
headers: {
// forward headers from client to the REST API (such as cookies)
'cookie': req.header('cookie'),
'my-custom-header': 'will be sent on all requests',
}});
const reactApp = (
);
try {
await getDataFromTree(reactApp);
} catch (err) {
console.error('Error while trying to getDataFromTree', err);
}
const markup = renderToString(reactApp);
res.send(
);
});
The documentations live at: https://react-isomorphic-data.netlify.com/
Feel free to open an issue if you have something in mind!