@tdcerhverv/api-connector

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