Issues while working with APIs

[kpnigalye]

So I am attempting to use APIs with the starter kit.

I want to implement a functionality where I get the data from API and pass it to the component through state. As per the documentation, I have code similar to this:

on('/sample', async () => { const data= await http.get("/api/someapifunction"); return <SamplePage {...data} />; });

This works when I redirect from Home page to 'Sample' but if I try to reload the page it throws error on server. Error: Can't set headers after they are sent. at ServerResponse.OutgoingMessage.setHeader (_http_outgoing.js:341:11) at ServerResponse.header (c:\_projects\sample\implementation\sample-app\node_modules\express\lib\response.js:718:10) at ServerResponse.send (c:\_projects\sample\implementation\sample-app\node_modules\express\lib\response.js:163:12) at Object.callee$1$0$ (c:\_projects\sample\implementation\sample-app\build\webpack:\c:\_projects\sample\implementation\sample-app\src\server.js:71:28) at tryCatch (c:\_projects\sample\implementation\sample-app\node_modules\babel-core\node_modules\regenerator\runtime.js:61:40) at GeneratorFunctionPrototype.invoke [as _invoke] (c:\_projects\sample\implementation\sample-app\node_modules\babel-core\node_modules\regenerator\runtime.js:328:22) at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (c:\_projects\sample\implementation\sample-app\node_modules\babel-core\node_modules\regenerator\runtime.js:94:21) at GeneratorFunctionPrototype.invoke (c:\_projects\sample\implementation\sample-app\node_modules\babel-core\node_modules\regenerator\runtime.js:136:37) at run (c:\_projects\sample\implementation\sample-app\node_modules\babel-core\node_modules\core-js\modules\es6.promise.js:104:47) at c:\_projects\sample\implementation\sample-app\node_modules\babel-core\node_modules\core-js\modules\es6.promise.js:115:28 at flush (c:\_projects\sample\implementation\sample-app\node_modules\babel-core\node_modules\core-js\modules\$.microtask.js:19:5) at doNTCallback0 (node.js:408:9) at process._tickCallback (node.js:337:13) Not sure whats causing this issue.

Need help!!!

[Bogdaan]

@kpnigalye hi, seems you use node http-core You must use core/fetch or server/client xhr (for example axios)

For example:

import fetch from '../core/fetch';

export const action = async () => {
  const response = await fetch('/api/someapifunction');
  const data = await response.json();
  return <SamplePage {...data} />;
};

[kpnigalye]

thanks for replying @Bogdaan. That was helpful but still not enough. Now at least the server isn't crashing. I am still getting that error but server somehow retrieves data again and loads the page. Is there any way to git rid of this error completely?

[Bogdaan]

@kpnigalye can you provide full example? I don't have any issues with xhr/fetch core, seems "this problem" == problem with wrong/incorect code.

[erichardson30]

Has anyone made api calls on the server side and used alt?

[Bogdaan]

@erichardson30 what do you mean? (if altjs source -- see example https://github.com/Bogdaan/react-auth-kit/blob/master/src/sources/TodoSource.js)

[erichardson30]

@Bogdaan I was going off your example with that. I was getting messed up with the server.use('/api/content', require('./api/content').default); from react-starter-kit. When I remove that nothing is loading and I didn't see that in your example

[kpnigalye]

Hey @Bogdaan so 'fetch' worked for me. Thanks! @erichardson30 I have used 'Bluebird' for promises and 'SuperAgent' to make http calls. My view invokes an action and I have a utility file that used 'SuperAgent' to make http calls. This code is wrapped inside my promise which ultimately returns the result.

I am closing this issue.