API utils for a React world 🚀

Installation

npm i @tdcerhverv/api-connector

Looking for docs to version 0.x

0.x docs

Getting started

First off, a request object has to follow this format

| Name | Type | Default value | Description | | ------------- | ---------------- | ------------- | --------------------------------------------------------------------------------------------------- | | endpoint | string | required | Endpoint, fx: /bc/matrix/discountmatrix | | host | string | null | API host, fx: https://odinapi.tdc.dk | | method | string | GET | Method (GET, POST, PUT, DELETE) | | headers | object | {} | Object with headers | | params | object | {} | Object with query parameters | | mode | string | 'cors' | Set the mode for CORS, see specification. * | | body | object | string | null | Object or string with body (obj will be stringified) | | timeout | number | 10 | Seconds before timing out the request | | mockResult | any | null | Mock a result (OBS: Request won't be called with this on) | | mockError | any | null | Mock an error (OBS: Request won't be called with this on) | | mockDelay | number | 0 | Delay any mock with x ms | | cacheBust | bool | false | Appends a query parameter with timestamp: ?_=14301301031 | | cacheKey | string | null | Cache the result in memory for a unique key | | onError | function | null | Error handler (request, error) => useful for global error handling | | onCacheSave | function | null | A handler called with (request, result) => for you to save | | onCacheLoad | function | null | A handler with (request) => return any value as the response | | clean | bool | false | If true, no defaults will be included | | retryAttempts | number | 0 | Number of times it should retry, before throwing the error |

* = credentials will be include if mode is cors or same-origin

In case you don't want to write host or some headers each time, you can set up some defaults.

// Somewhere in index.js or App.js fx
import { setRequestDefaults } from '@tdcerhverv/api-connector';

setRequestDefaults({
  host: 'https://odinapi.tdc.dk',
  headers: {
    'Content-Type': 'application/json; charset=utf-8',
  },
});

Use with hooks: useRequest

The simplest way to "hook" this up 🥁, is with the useRequest hook.

useRequest: (requestFunc, deps?) => result

requestFunc: () => Promise A function that returns a request promise. () => request({...})

deps?: any[] An array of values that when one of those values change, the requests will get called again.

response [ error, responseBody, loading, rawResponse ] The result from the request

import { useRequest, request } from '@tdcerhverv/api-connector';

export default function SomeComp() {
  const [error, response, loading, rawResponse] = useRequest(() =>
    request({
      endpoint: '/bc/p/discountmatrix',
    })
  );

  // render stuff!
}

Examples Hooks

• Run multiple requests (all at once)
• Run multiple requests (one by one)
• Call external api

Programatically request

import { request } from '@tdcerhverv/api-connector';

request({
  endpoint: '/bc/p/discountmatrix',
}).then((response) => {
  console.log(response);
});

// Using async/await 💪
const [err, response] = await request({
  endpoint: '/bc/p/discountmatrix',
  method: 'POST',
});

Misc

Other examples

• Initiate download dialog