Skip to main content

Http Requests

When it comes to executing http requests in React Native you have to use a library, as there is nothing built-in like fetch in the Web.

Depending on your backend (REST vs GraphQL) you would either go with Axios or Apollo Client.


To install just run npm i axios and then import like so: import axios from 'axios';. Then you just have to create an instance which you can configure.

export default axios.create({
baseURL: 'http://localhost:3000'

The baseURL-property above states that every request made with Axios will prefix the path with this url. E.g. axios.get('/some-path') will actually be resolve as GET http://localhost:3000/some-path.

Accessing Response Data

The actual response of a request is stored in the data-property and can be accesses like that:

const response = await axios.get('/search', {
params: {
term: searchTerm,
limit: 50
const results =;

Adding Authorization Header

You can easily add an Authorization-header via an interceptor like so:

import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

const instance = axios.create({
baseURL: 'http://localhost:3000'

async (config) => {
const token = await AsyncStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
return config;
(err) => {
return Promise.reject(err);

export default instance;

Apollo Client

To install just run npm i @apollo/client graphql and then import like so: import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';.

Now you have to create your ApolloClient instance:

const client = new ApolloClient({
uri: 'localhost:4000/graphql',
cache: new InMemoryCache()

And wrap your application with the ApolloProvider like so:

const App = () => (
<ApolloProvider client={client}>
<MyRootComponent />

For more information study this page.