SSR with cache ?

[revskill10]

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

[ntucker]

That would be pretty easy if #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.

[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;

[revskill10]

@marcin-piela I need a simple API like redux.

const cache = ...
const html = React.renderToString(<App />);
const serialized = serialize(cache.getState());

Currently, i'm using Apollo Client state. But it's limited to only graphql query.
If the library provide this feature, i think it's universal for all kind of network caching (even for mobile).

[marcin-piela]

For now only items method is available to get object with all cached responses, please provide your use case so we will think about solution 👍

[revskill10]

@marcin-piela My use case is as in Redux use case.
You create a redux store.
You render React component.
You then store.getState() to send to client.
Client then hydrates state from it.

My expectation is an API like cache.getState().

[marcin-piela]

@revskill10 new version 1.2.0 supports your usecase

Documentation:
https://marcin-piela.github.io/react-fetching-library/#/?id=ssr-server-side-rendering

Codesandbox example:
https://codesandbox.io/s/github/marcin-piela/react-fetching-library/tree/master/examples/ssr

Cache now allows to get/set items:

//on server:
const cachedItems = client.cache.getItems()

//send to client:
client.cache.setItems(cachedItems)