How do you handle Restful API calls in your React Native Application?
In this article, I want to show you how to add then config OpenApiTools generator in your React Native application.
In the first step, I create a sample React Native application with a typescript template:
npx react-native init OpenApiClient —template react-native-template-typescript
After that, I add axios to the project for the client-side API call
yarn add axios
There are multiple ways to use the OpenApiTools generator in your project, but in this article, I follow the way that adds the tool in your dev dependencies. To this purpose run:
yarn add @openapitools/openapi-generator-cli -D
Yes, our dependencies are ready. It’s time to generate all types and actions with the tool. First of all, you need a swagger address of your endpoints. For this purpose, I use swagger sample Pet Store.
Run the below command in your project to generate all files in the generated directory at the root of your project:
npx openapi-generator-cli generate -i https://petstore.swagger.io/v2/swagger.json -g typescript-axios -o generated
This command has three parameters:
- i: Address of input file or URI
- g: Name of the generator, In this example, we use typescript-axios to generator actions and type in typescript by axios. Open API Tool supports many types of generators in most programming languages and frameworks. You can see the list of them in this repo.
- o: Output folder of generated files. I used generated directory in this example.
For the next usage, I add the above command in the project package.json file scripts:
Therefore, every time you want to update generated files, you only need to enter the below command in the terminal:
Now everything is ready; it’s time to use these generated codes. First of all, I create a file with the name api.ts and import the API class from generated files and make an instance from them:
You can pass configuration object, base URL, and axios instance in the contractor on these objects.
Now you can use these APIs in your components, like below:
When you run the project and touch the Get First Button application throw an error:
If you run the application in debug mode and open the console, you see such an error:
Error: not implemented
at URL.get (URL.js:195)
at setSearchParams (common.ts:91)
at getPetById$ (api.ts:450)
at tryCatch (runtime.js:63)
at Generator.invoke [as _invoke] (runtime.js:293)
at Generator.next (runtime.js:118)
at tryCatch (runtime.js:63)
at invoke (runtime.js:154)
at tryCallOne (core.js:37)
The reason is React Native polyfill URL doesn’t look compliant with to WHATWG URL Standard. To resolve this problem, you should add the react-native-url-polyfill package to your project:
yarn add react-native-url-polyfill
After installing this package, adds the below code in your api.ts file:
The final code in your api.ts seems like below:
If you run the application again and press Get First Pet, something like the below image appear on the app screen:
In this article, we used Open Api Generator to call endpoint based on Swagger.
You can reach the code of this sample application in this repository: