frontplate-network v0.2.9

frontplate-network

• Great for debugging network traffic in React Native!
• Easily see your relevant API requests.
• Monitor request methods, durations, request and response data and more.
• Easily add authorisation headers and other request manipulations.
• Uniforming manage error handling from status codes and response bodies.

Install

# with yarn
yarn add frontplate-network
# or with npm
npm install frontplate-network

Usage

Configuration

const config = {
  hostUrl: 'http://localhost:5000',
  enableLogging: true, // use in dev to debug request/response data
  loggingConfigInfo: true, // true logs config info on api creation
  loggingConfigReporter: (log) => void, // callback to add logs for configs
  loggingRequest: true, // true logs when a request is started
  loggingResponse: true, // true logs when a request is finished
  loggingRequestData: true, // true logs the request body per request
  loggingResponseData: true, // true logs the request response body per request
}

loggingConfigReporter: (log: (string, any) => void)

You can add extra details to log for your debugging pleasure.

config.loggingConfigReporter = (log: (string, any) => void) => {
  log('DEV', config.dev)
  log('API Key', config.apiKey)
}

Making Requests

import networkFactory, * as methods from 'frontplate-network'
const { api, requestFactory } = networkFactory(config)
export const GET = requestFactory(methods.GET)

const POSTS_COMMENTS_ENDPOINT = '/posts/:post/comments'
const url = api.template(POSTS_COMMENTS_ENDPOINT).param('post', 123)
GET(url).then(data => console.log(data))

The api object exposed from networkFactory is an url builder based on safe-url-assembler.

import SafeUrlAssembler from 'safe-url-assembler'
const api = SafeUrlAssembler(hostUrl)

Pushing Data

If your data is in a object form, it will be JSON.stringifyed for you.

+ export const POST = requestFactory(methods.POST)

const POSTS_COMMENTS_ENDPOINT = '/posts/:post/comments'
const url = api.template(POSTS_COMMENTS_ENDPOINT).param('post', 123)
const comment = {'comment': 'foobar'}
POST(url, comment).then(data => console.log(data))

Adding Authorisation Headers

You can mutate the request before it is dispatched with fetch by implementing mutateRequest. You can return a new object with changed properties, or even return a Promise if you have asynchronous tasks that need to be called, such as renewing an expired authorisation with a separate request before continuing.

function getAuthTokenFromStore () {
  return store.getState().auth.token
}

const requestConfig = {
  mutateRequest: (request: Object) => {
    const token = getAuthTokenFromStore()
    return {
      ...request,
      headers: {
        ...request.headers,
        'Authorization': `Bearer ${token}`
      }
    }
  }
}

- export const GET = requestFactory(methods.GET)
+ export const GET = requestFactory(methods.GET, requestConfig)

Handling Unauthorised Requests

You can also add a handler for request responses to handle various status codes and/or errors, such as field validation, authorisation failures, or server errors.

function handleLogout () {
  // display messages
  // route to login screen
}

const requestConfig = {
+  onResponse: (status) => {
+    if (status === 401) {
+      handleLogout()
+    }
+  }
}