SSR with cache ?

Is there any method from cache to return cache data to client ?

[marcin-piela]

There is method for that:

client.cache.get(action)

And it’s working on server side for our simple cache provider.

Example app for next.js framework (responses are cached for 10s on server side):

next.config.js:

const withTM = require('next-transpile-modules')

module.exports = withTM({
  transpileModules: ['react-fetching-library']
});

client.js

import { createClient, createCache } from "react-fetching-library";

const cache = createCache(
  (action) => {
    return action.method === 'GET';
  },
  (response) => {
    return new Date().getTime() - response.timestamp < 10000;
  },
);

const client = createClient({
  cacheProvider: cache,
});

export default client;

pages/_app.js

import App, { Container } from 'next/app';
import 'isomorphic-unfetch';

import { ClientContextProvider } from "react-fetching-library";
import client from '../client';

class MyApp extends App {
  render () {
    const { Component, pageProps } = this.props

    return (
      <Container>
        <ClientContextProvider client={client}>
          <Component {...pageProps} />
        </ClientContextProvider>
      </Container>
    )
  }
}

export default MyApp

pages/index.js

import React from "react";
import client from "../client";

const action = {
  method: "GET",
  endpoint: "https://private-34f3a-reactapiclient.apiary-mock.com/users"
};

const Users = ({ loading, payload, error }) => {
  return (
    <div>
      {loading && <span>Loading</span>}

      {error && <span>Error</span>}

      {payload && <span>{payload.length}</span>}
    </div>
  );
};

Users.getInitialProps = async ({ req }) => {
  // fetch
  const res = await client.query(action);

  // get data from cache
  console.log(client.cache.get(action));

  return res;
}

export default Users;

[ntucker]

That would be pretty easy if https://github.com/marcin-piela/react-fetching-library/issues/13 happens. Then you can pull the state directly from the redux store. You won’t have to use redux in the browser as you could have a split point based on if it was running server-side.