How can I use multiple APIs ?

[esperancaJS]

As I understand it's only possible to connect to one.

[jaraquistain]

That's not correct. in /src/server.js you create a proxy and then use that proxy for /api. There's no reason you couldn't create multiple proxies and use them for /api2, /api3 or whatever you want to call them

[jaraquistain]

Here's the code I'm referring to (some stuff removed for clarity):

const targetUrl = 'http://' + config.apiHost + ':' + config.apiPort;
const proxy = httpProxy.createProxyServer({
  target: targetUrl,
  ws: true
});

// Proxy to API server
app.use('/api', (req, res) => {
  proxy.web(req, res, {target: targetUrl});
});

In your config you could just as easily have apiHost2 and apiPort2 or whatever you want to call it and then your coude would become the follwing:

const targetUrl = 'http://' + config.apiHost + ':' + config.apiPort;
const targetUrl2 = 'http://' + config.apiHost2 + ':' + config.apiPort2;
const proxy = httpProxy.createProxyServer({
  target: targetUrl,
  ws: true
});

const proxy2 = httpProxy.createProxyServer({
  target: targetUrl2,
  ws: true //or maybe false, depending on the API
});

// Proxy to API server
app.use('/api', (req, res) => {
  proxy.web(req, res, {target: targetUrl});
});
app.use('/api2', (req, res) => {
  proxy2.web(req, res, {target: targetUrl2});
});

[AnuragSinghTomarr]

hi All i have a http call in the widgetReducer its like
export function load() {
return {
types: [LOAD, LOAD_SUCCESS, LOAD_FAIL],
promise: (client) => client.get('/autosuggest.php?case=popular_suggestion&city=Bangalore')
};
}
So what i want is on the response from this above API i need to call another API. SO can any one let me know hot to get it.
This load function is being called in the widget of the container as

function fetchData(getState, dispatch) {
if (!isLoaded(getState())) {
return dispatch(loadWidgets());
}
}

@Connectdata(fetchData, null)
@connect(
state => ({
widgets: state.widgets,
editing: state.widgets.editing,
}),
{...widgetActions })
so loadWidgets is being called which calls the load., and as i get the response of loadWidget i need to call another API. after the first call is made.
Please let me know how to implement

[realbugger]

There's no reason you couldn't create multiple proxies and use them for /api2 , /api3 or whatever you want to call them

While that is true, it's not as simple as just creating new proxy servers. In src/helpers/ApiClient.js, it seems that all request path will get prepended with '/api', therefore they all get directed to the original proxy server. You'll need to at least make change there by adding parameters such that, depending on the parameter value, the instantiated apiclient (in src/server.js) knows which proxy server to go.

However, even with that, I still failed making request to any api server other than the default path, which is localhost:3000/api.

What I ended up with doing was adding separate http requests in api/actions/*.js. In current example, it returns data directly (see below).

export default function loadInfo() {
  return new Promise((resolve) => {
    resolve({
      message: 'This came from the api server',
      time: Date.now()
    });
  });
}

All I did was add my own api calls there against whatever api endpoints (same domain or cross domain). Since it's from the server side, it also takes care the cross-domain browser call security issue. (see below, I'm using axios just because I'm familiar with it and it returns promise)

import axios from 'axios';

export default function loadExternalInfo() {
  return axios.get('internal or external api end point').then((response) => {
      return {
        message: 'This came from the EXTERNAL api server',
        time: response
      };
    })
    .catch(function(err) {
      console.error(err);
    });
}

I'm new to this is still learning react.js and redux:) I would love to see other options that enables the flexibility of calling different api servers. For me, this approach gives me what I need with minimal change to the existing code.