How to use react-fetching-library - 10 common examples

import { createClient } from 'react-fetching-library';

import { requestHostInterceptor } from './requestInterceptors/requestHostInterceptor';

// In real application this const will be stored in ENV's
const HOST = 'https://private-34f3a-reactapiclient.apiary-mock.com';

export const Client = createClient({
  requestInterceptors: [requestHostInterceptor(HOST)],
});

import { createClient } from 'react-fetching-library';

import { requestHostInterceptor } from './requestInterceptors/requestHostInterceptor';

// In real application this const will be stored in ENV's
const HOST = 'https://private-34f3a-reactapiclient.apiary-mock.com';

export const Client = createClient({
  requestInterceptors: [requestHostInterceptor(HOST)],
});

import { requestHostInterceptor } from './requestInterceptors/requestHostInterceptor';

// In real application this const will be stored in ENV's
const HOST = 'https://private-34f3a-reactapiclient.apiary-mock.com';

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

export const Client = createClient({
  requestInterceptors: [requestHostInterceptor(HOST)],
  cacheProvider: cache,
});

import { createClient } from 'react-fetching-library';

import { requestHostInterceptor } from './requestInterceptors/requestHostInterceptor';

// In real application this const will be stored in ENV's
const HOST = 'https://private-34f3a-reactapiclient.apiary-mock.com';

export const Client = createClient({
  requestInterceptors: [requestHostInterceptor(HOST)],
});

import { createClient } from 'react-fetching-library';

import { requestHostInterceptor } from './requestInterceptors/requestHostInterceptor';

// In real application this const will be stored in ENV's
const HOST = 'https://private-34f3a-reactapiclient.apiary-mock.com';

export const Client = createClient({
  requestInterceptors: [requestHostInterceptor(HOST)],
});

import { createClient } from 'react-fetching-library';
import { requestHostInterceptor } from '../../api/FetchComponents/requestHostInterceptor';

// Import app settings
import { apiUrl } from '../../app/App.settings.jsx';

const endpointUrl = localStorage.getItem("endpointUrl");

export const client = createClient({
    requestInterceptors: [requestHostInterceptor(endpointUrl)],
});

import { createClient, createCache, QueryResponse, Action } from 'react-fetching-library';

import { requestHostInterceptor } from './requestInterceptors/requestHostInterceptor';

// In real application this const will be stored in ENV's
const HOST = 'https://private-34f3a-reactapiclient.apiary-mock.com';

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

export const Client = createClient({
  requestInterceptors: [requestHostInterceptor(HOST)],
  cacheProvider: cache,
});

import { createClient } from 'react-fetching-library';
import { cache } from './cache';

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

export default client;

export const imageEventsContainer = (edgeDevice) => {
    //const { edgeDevice} = props;

    const { loading, payload, error, query } = useQuery(fetchImageEvents(edgeDevice), false);

    let isLoading = loading;
    const isError = error;
    const reload = query;

    if (payload === undefined) isLoading = true;

    let capturetime = "";
    let imgSrc = "";
    let newOutOfStockItems = 0;

    if (payload !== undefined) {
        imgSrc = payload.body.dest_img;
        newOutOfStockItems = payload.body.result.num_detections;
        capturetime = payload.capturetime;
    }

const Users = () => {
  const { loading, payload, error, query } = useQuery(action, true);

  return (
    <div>
      {loading &amp;&amp; <span>Loading</span>}

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

      {!loading &amp;&amp;
        payload &amp;&amp;
        payload.map((user, index) =&gt; (
          <span>
            {index + 1} - {user.firstName} <br>
            <br>
          </span>
        ))}
</div>