Archive for the ‘Application Development’

Frequently Apollo GraphQL API which is also known as GraphQL over REST API needs to be integrated with frontend application which is built using React or React Native technology. In the usual scenario, both GraphQL API and the React application are hosted on the same domain. But in a specific scenario, we required to develop the react application with the Apollo GraphQL API which is already hosted on some domain other than the domain of the hosted React application. Such scenario leads to challenge, as Apollo GraphQL API does not allow cross-origin request/response while application development due to security reasons.

In such scenario when we try to make request from our React application to API hosted on another domain, and API endpoint does not support cross origin request/response we get the error message as below screenshot of browser inspector window.

In order to resolve the error, if we add the headers for cross domain from client side, we will get “Method not allowed for OPTIONS” error message when we call the graphql API endpoint from react application. This happens because of our application and graphql API are running on different ports/domains.

To address this challenge, we can implement one of two solutions given below:

Solution 1: Enabling CORS module in the Apollo GraphQL API source code so that it allows cross origin request. Below is the code snippet how this can be achieved.

Code :
Installation

npm install --dev cors

Simple Usage (Enable All CORS Requests)

var express = require('express');
var cors = require('cors') // Added this
var app = express();
app.use(cors()); // Added this

There are some drawback with this implementation.

1. We must have access to the GraphQL API source code. If API owner is not allowing access of the code we can’t implement this solution.
2. Even if API owner provide access to code and we implement this solution, it becomes security threat because now API becomes Global/Public and can be accessed by any unauthorized cross domain also.

Solution 2: This solution doesn’t require to change Apollo GraphQL API code hence has it overcomes the drawbacks of the solution 1. In this solution we are creating a proxy server for GraphQL API. All GraphQL API requests from our React application make call on proxy server and it redirect the request on actual GraphQL API endpoint and provide the response. So ultimately proxy server become a server side middleware for the GraphQL API endpoint. Below are the code snippets how this can be achieved.

1. Implement the Apollo client for React application

import { ApolloLink } from 'apollo-link';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
const graphUrl = 'http://[appdomain]:3000/graphql';
const client = new ApolloClient({
link: new HttpLink({ uri: graphUrl }),
cache: new InMemoryCache() });

2. Create a ./.env file on React application root for the API endpoint configuration dynamically

API_URL=http://apidomain.com/graphql
PORT=3000

3. Create a config file for the API endpoint (./src/server/config/config.js) on React server

let config = {
   apiUrl: process.env.API_URL,
   apiKeyName: process.env.API_KEY_NAME,
   apiKeyValue: process.env.API_KEY_VALUE,
   port: process.env.PORT || 3000,
   assignKey: assignKey
}

function assignKey(query){
 let obj = {};
 obj[config.apiKeyName] = config.apiKeyValue;
 return Object.assign(query, obj);
}

module.exports = config;

4. Create a server file which supposed to run on node server

require('dotenv').config();
const config = require('./config/config');
const express = require('express');
const request = require('request');
const cors = require('cors');
const app = express();
const port = config.port;
app.use(cors());

app.use('/', function(req, res) {

//Take the baseurl from your api and also supply whatever
//route you use with that url
 let url =  config.apiUrl + req.url;
 let query = config.assignKey(req.query);

//Pipe is through request, this will just redirect
 //everything from the api to your own server at localhost.
 //It will also pipe your queries in the url
 req.pipe(request({ qs: query , uri: url })).pipe(res);
});

//Start the server by listening on a port
app.listen(port, () => {
 console.log("+---------------------------------------+");
 console.log(`|  Listening on port:${port}            |`);
 console.log("+---------------------------------------+");
});

5. Update the package.json to run the proxy server

"scripts": {
...
"server-start": "node ./src/server/server.js",
}

6. To start the server run  below command

 npm run server-start

Web application development is no more limited to create web page with few images and some content. It has become more complex and requires expertise knowledge. Since a decade there has been a tremendous increase in the dependency on web. People from all across the world have been using web and find it reliable for most of their information, product or service needs. Due to this ever booming demand, the companies offering web development services are more cautious to improve their performance and produce exceptionally good quality solutions to beat the competition.

Present day companies very well understand the importance of a tailor made software and hence prefer tailor made software as compared to the ready to use software. This becomes challenging for a custom application development company if in case they are unable to cope with the demand while they also have to ensure that they benefit from each custom application development project.

Fleet Management Software allows organizations to efficiently handle various management related tasks for fleets of vehicles, ships, and airplanes.