Crono Boost

What Is this?

Crono Boost is a React component capable of handling multiple features with a single installation.

Its main purpose is to manage the interface of your application to the right GraphQL API installed in the Matchplat backend.

It uses Apollo Client 3.0 for GraphQL purposes:
Apollo Client

Use CronoBoost

Install CronoBoost in the highest possible component of your application:

import { CronoBoost } from "@matchplat/crono";

Use it for example as a wrapper for the component containing your App or Router:

const Wrapper = () => {
  return (
    <CronoBoost>
      <MyApp />
    </CronoBoost>
  );
};

You can stop the silentRefresh by passing the prop refresh as false

const Wrapper = () => {
  return (
    <CronoBoost refresh={false}>
      <MyApp />
    </CronoBoost>
  );
};

default is true.

You can use uri to customize the uri to use for the database

const Wrapper = () => {
  return (
    <CronoBoost uri="yourUri">
      <MyApp />
    </CronoBoost>
  );
};

default is blank.

You can use cacheConfig to customize the inMemoryCache of graphQl

const Wrapper = () => {
  return (
    <CronoBoost cacheConfig={...cacheOptions}>
      <MyApp />
    </CronoBoost>
  );
};

default is no options.

You can use onlyBoost to use the responsiveness of Crono without installing graphQl

const Wrapper = () => {
  return (
    <CronoBoost onlyBoost>
      <MyApp />
    </CronoBoost>
  );
};

default is false.

You can use refreshUri to generate a new endpoint for token refresh

const Wrapper = () => {
  return (
    <CronoBoost refreshUri={"http:www.customuri.com"}>
      <MyApp />
    </CronoBoost>
  );
};

The component will take care of:

• understand whether to use DEV API or PROD
• install a link between Apollo Client and the API
• manage the user's token
• manage API calls with the user token
• manage user token refresh
• install a silent refresh into your app (you can turn this off as described)
• manage app Responsive rem style
• show Breakpoints for Responsive debug
• manage a custom URI for GraphQl
• manage custom inMemoryCache options

For more information on which of these methods can be extracted individually, read Methods