- Read Tutorial
- Watch Guide Video
The reason that we're gonna do this is because if you look at our code right now, you can see that we have this apiEndpoint string and it's a pretty long string. Any time that we're going to need to communicate with our API, which you're gonna see is quite often through this application, we're gonna need to have some form of this entire string but as you are gonna notice, we're gonna have, from this https, all the way through this extension of the URL, that's all gonna be identical. So there's really no point in having that much duplicate code in so many of our components.
So what I'm gonna do is create a API helper function so that when we have a method, like we have here with handleSubmit, instead of us calling axios all over the place and then having to have these API endpoints, instead what I'm gonna do is we're gonna be able to call our function. It's gonna set up all of the basic items that we need in order to have this work and that's gonna be the only function that calls axios.
So let's get started. I'm going to come to the base of our application. Let me close all of these and you can see, we already have a utils module here. I'm gonna create a new file inside of utils and this is just gonna be called api.ts. This doesn't have to be a tsx file because we're not using any JSX, this is just gonna be pure TypeScript.
So I'm gonna close that off and first, I'm gonna import axios from axios and then from here, I'm going to just create one default export. So I'll say export default and then I'll say axios.create, and this is a function, if you go through the axios documentation, you'll see it inside of there, and now I'm gonna create a baseURL and this is gonna take a string. This baseURL is gonna be that string that I mentioned. Everything starting from the https, all the way through this slash. So I'm going to cut all of that and place it here inside of this baseURL.
What this is going to allow us to do is we're no longer going to have to copy all of that code every single time we wanna communicate with the API. We can say that this is the baseURL and that everything else is just an extension on top of that.
So I'm gonna hit Save here in this API utility function and now what we can do is we can refactor this code. So I can come up here and I can get rid of the axios call and I'm gonna import our API helper. A common convention you'll see when you're building out these helper functions is you'll see them spell it out like this, like API all in caps. So I'm gonna say import API from ../../ and utils and then api, oh, not router, api.
AuthScreen.tsx
import React, { useState } from "react";
import { View, Text, ToucableOpacity, TextInput } from "react-native";
import textInputStyles from "../../styes/forms/textInputStyles";
const { textFieldWrapper, textField } = textInputStyles;
import authScreenStyles from "../../styles/stacks/auth/authScreenStyles";
import API from "../../utils/api";
Okay, with that in place what we can do is we can streamline our code for the API. So we can get rid of axios here and then for our apiEndpoint, we don't even need this up here. We don't need this variable because all we need is this little string. So I'm gonna copy that, and then place it where we were calling apiEndpoint. I'm just gonna replace it with this string. And I can get rid of this and clean up our code a little bit.
Now let's hit save and let's test this out and let's see if this is working. So I'm going to open up DevCamp Space really quick because I forget the email address that I used here. So I wanna verify that I'm using the right one. Okay, so I did reactnative@devcamp.com. Perfect so let's open up the terminal and then the simulator and I'm gonna test this out to see if it's working. So reactivenative@devcamp.com and then password of asdfasdf.
Now if I hit Login, you'll see we're getting our JWT token, the JWT is still coming in and we've refactored our code nicely.
So now, this is the really cool thing. Any time that we want to communicate with the API, we no longer need to call this long string or store that inside of the component that's using it. Now all we have to do is find the extension and then just add that on top of it and that's really gonna streamline our process, it's gonna make for quite a few less bugs and typos and different things like that.
So great job if you went through all of that. You now know how to create a API utility function in React Native.