Does this work with react native

[vibhavagarwal5]

I am building an app in react native and I require to poll an API. Will this library be useful for me in react native for polling?

[TejasQ]

Hi Vibhav! Great to hear from you!

This library uses the Fetch API which doesn't exist in React Native unless polyfilled, so I don't think you'll have out of the box integration with it, although it could work in theory, this library is purely intended for web use for now.

However, you're more than welcome to extend its functionality in a creative way and present a PR if you like. 🙂

[fabien0102]

https://facebook.github.io/react-native/docs/network

this should work! @vibhavagarwal5 I think you should just try :) (and tell us if it's work 👼) (sorry I don't have any running react-native projects for now, so it's hard to test quickly to have a better answer)

[TejasQ]

@fabien0102 is right! I was wrong! Turns out the fetch API does exist in React Native. 😅 @vibhavagarwal5 I would love to hear about your attempts to work with it too!

[kallaspriit]

I tried it with React native and it does work but not out of the box.

1. I had to include abort controller polyfill at the beginning of my project

import "abortcontroller-polyfill/dist/polyfill-patch-fetch";

2. When using the <Get> directly without a <RestfulProvider>, it builds the wrong URL with a leading "/".

For example this fails (attempts to load /https://dog.ceo/api/breeds/image/random):

<Get path="https://dog.ceo/api/breeds/image/random">
  {randomDogImage =>
    randomDogImage ? (
      <Image
        source={{ uri: randomDogImage.message }}
        style={{ width: 400, height: 300 }}
      />
    ) : (
      <Text>Loading</Text>
    )
  }
</Get>

But this works:

<RestfulProvider base="https://dog.ceo/api">
  <Get path="breeds/image/random">
    {randomDogImage =>
      randomDogImage ? (
        <Image
          source={{ uri: randomDogImage.message }}
          style={{ width: 400, height: 300 }}
        />
      ) : (
        <Text>Loading</Text>
      )
    }
  </Get>
</RestfulProvider>

It would be nice if the URL building issue could be resolved and it would either be able to work without the abort polyfill or if not then document the need for it.

[TejasQ]

Great, @kallaspriit! Thanks so much for your comment. Would you like to work towards a PR with us?

[kallaspriit]

I debugged the URL issue a bit and added some logging to the built version:

export var composePath = function(parentPath, path) {
  if (parentPath === void 0) {
    parentPath = "";
  }
  if (path === void 0) {
    path = "";
  }

  var result = "";

  if (path.startsWith("/") && path.length > 1) {
    result = url.resolve(parentPath, path);
  } else if (path !== "" && path !== "/") {
    result = parentPath + "/" + path;
  } else {
    result = parentPath;
  }

  console.log("composePath", {
    parentPath,
    path,
    result
  });

  return result;
};

From this I'm getting

composePath Object {                       
  "parentPath": "",                        
  "path": "https://reqres.in/api/users",   
  "result": "/https://reqres.in/api/users",
}                                          

So the issue seems to be the else if adding a slash in front of the https url
"" + "/" + "https://reqres.in/api/users"

...
else if (path !== "" && path !== "/") {
  result = parentPath + "/" + path;
}
....

This seems to work for me but I guess You should check that it does not break anything else:

export const composePath = (parentPath: string = "", path: string = ""): string => {
  // Issue #93 - just return the path if the parent path is empty
  if (parentPath.length === 0) {
    return path;
  }

  if (path.startsWith("/") && path.length > 1) {
    return url.resolve(parentPath, path);
  } else if (path !== "" && path !== "/") {
    return `${parentPath}/${path}`;
  } else {
    return parentPath;
  }
};

Hope this is helpful, let me know what else can I do :)

[chrfalch]

Everything works almost out of the box now. No need for any tricks, but there is an issue with the compiled library - it references React in a version that causes some incompatibility problems with React. Would it be possible to add React as a peerDependency instead? @TejasQ

[TejasQ]

Absolutely, @chrfalch! Would this be a PR you’d like to make in collaboration with us?

[chrfalch]

Would be possible - the only issue is that I'm a React Native dev, and not really that fluent with ReactJS, dependencies, packages and so.

[Manishalexin]

@TejasQ I can take it up. Is that okay?
Also, do you think there can be a way where the user can provide another networking library that they want to use like say, Axios?

[chrfalch]

Would be great, @Manishalexin, if you could look at this one - the library is really awesome and would be really super helpful for devs in the React Native Community.

[chrfalch]

Do you need any help testing this, @Manishalexin?

[TejasQ]

@Manishalexin do it. I'll support you along the way. ❤️ Let's open a new issue (by you) describing the problem and your plan of attack? Then we can close this one in favor of that.

[Manishalexin]

Opened a new issues #159 and corresponding pull request #160
This fixes the issue that @chrfalch was mentioning and is not on platform-specific. Although the fix is simple, but might not be ideal as both the components are using separate resolution functions. [See details in #160 ]

For this, I'll add just one pull request which will address the issue of using it on react native. I'll also add a section in the document on getting started with it in react-native. Edit: Not sure if anything is needed in the documentation as all the steps are the same. I'll still mention it somewhere that it can also be used in React Native to remove uncertainty.

For the other piece on adding an option of using a third party network library like Axios, i'll need some time to go through this repo to evaluate the feasibility and benefits of having that as an option. What do you think @TejasQ ?