Notes

import React from 'react';
import { render } from 'react-dom';
import { ApolloLink } from 'apollo-link';
import { onError } from 'apollo-link-error';
import { getUUID } from 'foundation-components-utils';
import { HttpLink, InMemoryCache, ApolloClient } from 'apollo-client-preset';

import ErrorHandler from '../../features/common/ErrorHandler';

const API_PORT_NO = process.env.REACT_APP_API_PORT_NO;
const REST_API_BASE_PATH = process.env.REACT_APP_REST_API_BASE_PATH;
const { hostname, protocol } = window.location;
const REACT_APP_GRAPHQL_API_BASE_PATH =
process.env.REACT_APP_GRAPHQL_API_BASE_PATH;
const API_URL = `${protocol}//${hostname}:${API_PORT_NO}`;

let errorCounter = 0;
export const DEFAULT_ERROR_TYPE = 'toast';

const errorTypes = {
overlay: 'overlay',
toast: 'toast',
grm: 'GRM'
};
/**
* Checking response status. In case of failed response code throw error back
* @method checkStatus
* @param {Array / Object} service response
* @return {Array / Object} response data
*/
const checkStatus = (response) => {
if (response.ok) {
return response.json();
}
const error = new Error(response.statusText);
response.error = error;
return response;
};

/*
* Function to add mandatory headers before routing the request.
* correlationId is added in the header so that the request can be tracked across layers.
*/
const addMandatoryHeaders = (headers) => {
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
headers.append('correlationId', getUUID());
};

// Make server call using fetch
const fetchData = (apiURL, httpVerb, headers, requestPayLoad) => {
const requestHeaders = new Headers();

// Add the mandatory headers here
addMandatoryHeaders(requestHeaders);

// Add the custom headers
Object.keys(headers).forEach((key) => {
requestHeaders.append(key, headers[key]);
});
requestHeaders.append('X-Forwarded-For', '127.0.0.1');
const responseText = fetch(apiURL, {
method: httpVerb,
headers: requestHeaders,
body: JSON.stringify(requestPayLoad)
})
.then((response) => checkStatus(response))
.then((data) => {
if (Object.prototype.hasOwnProperty.call(data, 'error')) {
const targetDiv = document.getElementById('serviceErrorHandler');
errorCounter += 1;
render(
<ErrorHandler
errorId={errorCounter}
errorType={DEFAULT_ERROR_TYPE}
/>,
targetDiv
);
}
return data;
})
// eslint-disable-next-line
.catch((error) => {
throw error;
});

return responseText;
};

/*
* Function used by all the actions in container components to make API Call
* Function to make a asynchronous call using Async/await
*/
export const serviceConnector = async (
apiName,
httpVerb,
headers,
requestPayLoad
) => {
const apiURL = `${API_URL}${REST_API_BASE_PATH}${apiName}`;
const data = await fetchData(apiURL, httpVerb, headers, requestPayLoad);
const jsonResult = await data;
return jsonResult;
};

/*
* Callback function which triggers on any GraphQL error
*/
export const errorLinkCallback = ({
graphQLErrors,
networkError,
operation,
response
}) => {
const targetDiv = document.getElementById('serviceErrorHandler');
if (graphQLErrors) {
graphQLErrors.map(({ message, locations, path }) => {
errorCounter += 1;
console.log(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}, Operation: ${operation}, Response: ${response} `
);
return render(
<ErrorHandler
message={message}
errorId={errorCounter}
errorType={DEFAULT_ERROR_TYPE}
/>,
targetDiv
);
});
}
if (networkError) {
errorCounter += 1;
render(
<ErrorHandler
message={networkError.message}
errorId={errorCounter}
errorType={errorTypes.overlay}
/>,
targetDiv
);
}
};

/*
* Callback function which triggers on every successful GraphQL response
*/
export const statusLinkCallback = (operation, forward) =>
forward(operation).map((response) => {
if (response.errors && response.errors.length > 0) {
const targetDiv = document.getElementById('serviceErrorHandler');
response.errors.forEach((error) => {
if (error.errorType !== errorTypes.grm) {
errorCounter += 1;
render(
<ErrorHandler
message={error.message}
errorId={errorCounter}
errorType={error.errorType}
/>,
targetDiv
);
}
});
}
return response;
});

/*
* Function to handle errors from GraphQL requests
*/
const errorLink = onError(errorLinkCallback);

/*
* Function to intercept GraphQL responses and handle errors if any
*/
const statusLink = new ApolloLink(statusLinkCallback);

const httpLink = new HttpLink({
uri: `${API_URL}${REACT_APP_GRAPHQL_API_BASE_PATH}`,
headers: {
correlationId: getUUID(),
'X-Forwarded-For': '127.0.0.1'
},
credentials: 'same-origin'
});
const link = ApolloLink.from([errorLink, statusLink, httpLink]);
/*
* Function used by all the actions in container components to make GraphQL Call
*/
export const apolloClient = new ApolloClient({
link,
cache: new InMemoryCache()
});