How to use fetchr - 10 common examples

/* eslint-disable no-undefined */
import { test } from "eater/runner";
import Fetchr from "fetchr";
import assert from "power-assert";
import { getText } from "../modules/agreedSample";
import { createStore } from "./lib/storeUtils";

let needFailure = null;
Fetchr.registerService({
  name: "agreedSample",
  read(req, resource, params, config, cb) {
    return needFailure
      ? cb(new Error("failure"))
      : cb(needFailure, { text: "Hello world" });
  }
});

const store = createStore({ cookie: {} });

test("agreedSample: getText success", () => {
  store.dispatch(getText()).then(() => {
    assert.deepEqual(store.getState().page.agreedSample, {
      text: "Hello world",
      loading: false,
      loaded: true

/* eslint-disable no-undefined */
import Fetchr from "fetchr";
import { test } from "eater/runner";
import assert from "power-assert";
import { ACCESS_TOKEN_AUDIENCE_NAME } from "server/services/AccessToken";
import { login } from "shared/redux/modules/auth";
import { createStore, createWithSignedStore } from "./lib/storeUtils";

/**
 * mock accessToken service
 */
Fetchr.registerService({
  name: "accessToken",
  create(req, resource, params, body, config, cb) {
    if (params && params.username === "s") {
      return void cb(new Error("username is short"));
    }

    cb(null, null);
  }
});

test("auth: login success username scott", () => {
  const loginAction = login("scott", "tiger");
  createWithSignedStore("scott", ACCESS_TOKEN_AUDIENCE_NAME, {}).then(store => {
    store.dispatch(loginAction).then(() => {
      assert.deepEqual(store.getState().app.auth, {
        login: true,

/* eslint-disable no-undefined, callback-return */
import Fetchr from "fetchr";
import { test } from "eater/runner";
import assert from "power-assert";
import Immutable from "seamless-immutable";
import { INITIAL_STATE, searchStyle } from "../modules/style";
import { createStore } from "./lib/storeUtils";

let needFailure = false;
Fetchr.registerService({
  name: "style",
  read(req, resource, params, config, cb) {
    return needFailure
      ? cb(new Error("failure"))
      : cb(null, { results_available: "10", style: ["foo", "bar"] });
  }
});

test("style: searchStyle success", () => {
  const searchStyleAction = searchStyle({ query: "foo" });
  const initialState = Immutable({ page: { style: INITIAL_STATE } });
  const store = createStore({
    initialState
  });
  store.dispatch(searchStyleAction).then(() => {
    const state = store.getState().page.style;

/* eslint-disable no-undefined */
import Fetchr from "fetchr";
import { test } from "eater/runner";
import assert from "power-assert";
import { ACCESS_TOKEN_AUDIENCE_NAME } from "server/services/AccessToken";
import { login, logout } from "shared/redux/modules/auth";
import { createWithSignedStore } from "./lib/storeUtils";

/**
 * mock accessToken service
 */
Fetchr.registerService({
  name: "accessToken",
  create(req, resource, params, body, config, cb) {
    cb(null, null);
  },

  delete(req, resource, params, config, cb) {
    cb(null, null);
  }
});

test("auth: logout success", done => {
  const logoutAction = logout();
  createWithSignedStore("scott", ACCESS_TOKEN_AUDIENCE_NAME, {}).then(store => {
    store.dispatch(logoutAction).then(() => {
      assert.deepEqual(store.getState().app.auth, {
        login: false,

/* eslint-disable no-undefined */
import { test } from "eater/runner";
import assert from "power-assert";
import Fetchr from "fetchr";
import { ACCESS_TOKEN_AUDIENCE_NAME } from "server/services/AccessToken";
import { checkLogin } from "shared/redux/modules/auth";
import { createWithSignedStore, createStore } from "./lib/storeUtils";

/**
 * mock accessToken service
 */
Fetchr.registerService({
  name: "accessToken",
  create(req, resource, params, body, config, cb) {
    cb(null, null);
  },

  delete(req, resource, params, config, cb) {
    cb(null, null);
  }
});

test("auth: checkLogin success", () => {
  const checkLoginAction = checkLogin();
  createWithSignedStore("scott", ACCESS_TOKEN_AUDIENCE_NAME, {}).then(store => {
    store.dispatch(checkLoginAction).then(() => {
      assert.deepEqual(store.getState().app.auth, {
        login: true,

export default function createReduxApp(config: any) {
  const maxAge = Math.floor(config.offload.cache.maxAge / 1000);

  /*
   * 全リクエストで共有される初期データのためのStoreです。
   */
  const initialStore = createStore({} as any, {
    fetchr: new Fetchr({ ...config.fetchr, req: {} }),
    // @ts-ignore
    history: createMemoryHistory("/"),
    logger,
  });

  return reduxApp;

  /*
   * サーバサイドレンダリングのためのExpressミドルウェアです。
   */
  function reduxApp(
    req: Request & { csrfToken: any; useragent: ExpressUseragent.UserAgent },
    res: Response & { startTime: Function; endTime: Function },
    next: Function,
  ): void {
    // @ts-ignore

function reduxApp(
    req: Request & { csrfToken: any; useragent: ExpressUseragent.UserAgent },
    res: Response & { startTime: Function; endTime: Function },
    next: Function,
  ): void {
    // @ts-ignore
    const memoryHistory = createMemoryHistory(req.url);
    const timing = res;

    /*
     * リクエスト毎のStoreです。
     * 共有の初期ストアのステートを初期ステートとして使用します。
     */
    const store = createStore(initialStore.getState(), {
      fetchr: new Fetchr({ ...config.fetchr, req }),
      history: memoryHistory,
      logger,
    });
    const history = syncHistoryWithStore(memoryHistory, store);
    const clientConfig = getClientConfig(config, req);

    if (__DISABLE_SSR__) {
      return void renderCSR({
        res,
        store,
        config,
        clientConfig,
        timing,
      });
    }

export function createStore(options: any) {
  const history = createMemoryHistory(options.historyRoute || "/");
  const initialState = options.initialState || {};
  const store = (create as any)(
    reducer,
    initialState,
    (applyMiddleware as any)(
      ...[
        steps,
        authMiddleware(),
        fetchr(new Fetchr({ ...configs.fetchr, req: {} })),
        options.upload &&
          uploader({
            baseURL: `http://localhost:${options.upload.port}/`,
            csrfToken: null,
          }),
        routerMiddleware(history),
      ].filter(Boolean),
    ),
  );
  return store;
}

function reduxApp(req, res, next) {
    const memoryHistory = createMemoryHistory(req.url);
    const timing = __DEVELOPMENT__ ? res : { startTime: noop, endTime: noop };

    /*
     * リクエスト毎のStoreです。
     * 共有の初期ストアのステートを初期ステートとして使用します。
     */
    const store = createStore(initialStore.getState(), {
      cookie: [req, res],
      fetchr: new Fetchr({ ...config.fetchr, req }),
      history: memoryHistory,
      logger
    });
    const history = syncHistoryWithStore(memoryHistory, store);
    const clientConfig = getClientConfig(config, req);

    if (__DISABLE_SSR__) {
      return void renderCSR({ res, store, config, clientConfig, timing });
    }

    /*
     * 高負荷時にSSRをスキップするモードです。
     * オフロードモードをサポートしない場合は ./offloadDetector.js と一緒に削除してください。
     */
    if (__ENABLE_OFFLOAD__) {
      debug("offload mode, disable server-side rendering");

function configStore() {
  const getJson = (id) => JSON.parse(document.getElementById(id).getAttribute('data-json'));
  const initialState = getJson('initial-state');
  const clientConfig = getJson('client-config');

  return createStore(initialState, {
    cookie: [],
    fetchr: new Fetchr(clientConfig.fetchr),
    fetchrCache: clientConfig.fetchrCache,
    history: browserHistory,
    devTools: __DEVELOPMENT__,
  });
}