Issue found when installing 'request' package #495

Activity

1. gaearon commented on Aug 25, 2016

   

   gaearon

   on Aug 25, 2016

   Contributor

   More actions

   What is your use case for request in a client-side app?
   If you just need to make an AJAX request, use window.fetch instead.
   We include a polyfill for it.
2. javlc commented on Aug 25, 2016

   

   javlc

   on Aug 25, 2016

   Author

   More actions

   I want to consume an external server api (not a localhost one, but on another external domain).
   I will go the fetch() way then, didn't know about the polyfill feature. Thanks!
3. javlc

   closed this as completedon Aug 25, 2016
4. gaearon commented on Aug 26, 2016

   

   gaearon

   on Aug 26, 2016

   Contributor

   More actions

   fetch() works with any domain as long as CORS is configured on it.
   And if it's not, we let you specify "proxy" option in package.json which will automatically proxy all unrecognised requests to the specified server.
   You can find more instructions in the generated README of your project, or in template/README.md in this repo.
5. javlc commented on Aug 28, 2016

   

   javlc

   on Aug 28, 2016

   Last edited by javlc

   Author

   More actions

   Hello @gaearon,
   I have tried this from a couple of angles, but could not make it to work.
   I set up the proxy url, constructed my query call, yet still the fetched url has http://localhost:3000 prepended to the api call. Image below:

   

   In summary: I am setting the proxy url to: "proxy": "https://holidayapi.com/v1", then added the string /api/ in the fetch() call, appended my constructed query, and it did not work ok.

   You may see the code in my react-date-range repo, use-fetch branch.
   You may check the forms.js file, and the package.json one.
6. gaearon commented on Aug 28, 2016

   

   gaearon

   on Aug 28, 2016

   Contributor

   More actions

   then added the string /api/ in the fetch() call

   You don’t need to. Why did you do this?

   We don’t treat URLs starting with /api in any special way. We just prepend the proxy URL to the URL you pass to fetch().

   So it tried to load https://holidayapi.com/v1/api/holidays because that’s what you get by concatenating https://holidayapi.com/v1 and /api/holidays. You probably meant fetch('/holidays') instead.

   👍React with 👍1Reacted by Javi Lopez >
7. gaearon commented on Aug 28, 2016

   

   gaearon

   on Aug 28, 2016

   Contributor

   More actions

   Verified that this fixes the problem in your repo:

            function search(query) {
   -            return fetch(`/api/holidays?${query}`, {
   +            return fetch(`/holidays?${query}`, {
                    accept: 'application/json',                
                }).then(checkStatus)
                .then(parseJSON);
   @@ -129,7 +129,7 @@ class Form extends Component {
              return response.json();
            }
   
   -        search(querystring);
   +        search(querystring).then(result => console.log(result));
   
        }
   

   🎉React with 🎉1Reacted by Javi Lopez >
8. javlc commented on Aug 29, 2016

   

   javlc

   on Aug 29, 2016

   Author

   More actions

   You are right indeed!
   I (mistakenly) was thinking that somehow /api/ was a keyword that would be replaced by the url set in proxy field, in package.json.

   Thank you heaps for the given code correction. Now it all works as expected!
9. lock

   locked and limited conversation to collaborators on Jan 22, 2019