Как реализуется работа с REST API или GraphQL в приложении?

Работа с REST API или GraphQL в React Native реализуется через сетевые запросы, отправляемые из JavaScript-кода в бекенд-сервер. React Native, в отличие от браузера, не использует стандартные браузерные API как XMLHttpRequest или window.fetch напрямую, но предоставляет полифиллы и совместимые библиотеки, которые делают работу с сетью практически идентичной веб-разработке.

Работа с REST API

REST (Representational State Transfer) — это архитектурный стиль, где взаимодействие между клиентом и сервером осуществляется через HTTP-запросы: GET, POST, PUT, DELETE и т.д. Ответы приходят чаще всего в формате JSON.

1. fetch — базовый способ

React Native поддерживает API fetch из коробки. Это Promise-базированный способ отправки HTTP-запросов.

useEffect(() => {
fetch('https://api.example.com/posts')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => console.error(error));
}, \[\]);

Пример с POST-запросом

fetch('https://api.example.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ title: 'Новая запись', content: 'Содержимое' }),
});

2. Использование библиотеки axios

axios — более мощная альтернатива fetch, поддерживает interceptors, автоматическое преобразование данных и обработку ошибок.

Установка:

npm install axios

Пример запроса:

import axios from 'axios';
useEffect(() => {
axios.get('https://api.example.com/posts')
.then(response => setPosts(response.data))
.catch(error => console.error(error));
}, \[\]);

POST-запрос:

axios.post('https://api.example.com/posts', {
title: 'Новая запись',
content: 'Текст записи'
});

Интерсепторы:

axios.interceptors.request.use(config => {
config.headers.Authorization = \`Bearer ${token}\`;
return config;
});

3. Хранение и использование токенов

Для аутентификации с API часто используют JWT или OAuth-токены. Их можно хранить с помощью AsyncStorage:

npm install @react-native-async-storage/async-storage
import AsyncStorage from '@react-native-async-storage/async-storage';
await AsyncStorage.setItem('token', 'abc123');
const token = await AsyncStorage.getItem('token');

Работа с GraphQL

GraphQL — это язык запросов к API, позволяющий запрашивать только необходимые поля и объединять несколько ресурсов в одном запросе.

1. Установка Apollo Client

Apollo — наиболее популярная библиотека для работы с GraphQL в React и React Native.

Установка:

npm install @apollo/client graphql

Создание клиента:

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
const client = new ApolloClient({
uri: 'https://api.example.com/graphql',
cache: new InMemoryCache(),
});

Обёртка ApolloProvider:

<ApolloProvider client={client}>
<App />
</ApolloProvider>

2. Выполнение запроса

import { gql, useQuery } from '@apollo/client';
const GET_POSTS = gql\`
query {
posts {
id
title
content
}
}
\`;
const Posts = () => {
const { loading, error, data } = useQuery(GET_POSTS);
if (loading) return <Text>Загрузка...</Text>;
if (error) return <Text>Ошибка: {error.message}</Text>;
return (
<View>
{data.posts.map(post => (
<Text key={post.id}>{post.title}</Text>
))}
</View>
);
};

3. Отправка мутаций (POST-запросов)

import { useMutation, gql } from '@apollo/client';
const ADD_POST = gql\`
mutation AddPost($title: String!, $content: String!) {
addPost(title: $title, content: $content) {
id
title
}
}
\`;
const AddPostButton = () => {
const \[addPost, { data }\] = useMutation(ADD_POST);
return (
<Button
title="Добавить"
onPress={() =>
addPost({ variables: { title: 'Заголовок', content: 'Текст' } })
}
/>
);
};

4. Управление кэшом Apollo

Apollo кэширует полученные данные и повторно их использует:
client.cache.readQuery({ query: GET_POSTS });
client.cache.writeQuery({
query: GET_POSTS,
data: { posts: \[...oldPosts, newPost\] }
});

Обработка ошибок и состояний

Состояния загрузки

if (loading) return &lt;ActivityIndicator /&gt;;
if (error) return &lt;Text&gt;Ошибка!&lt;/Text&gt;;

Примеры на практике

REST: получение данных о пользователе

useEffect(() => {
const loadUser = async () => {
try {
const res = await axios.get('https://api.example.com/user');
setUser(res.data);
} catch (e) {
console.error(e);
}
};
loadUser();
}, \[\]);

GraphQL: добавление комментария

const ADD_COMMENT = gql\`
mutation AddComment($postId: ID!, $content: String!) {
addComment(postId: $postId, content: $content) {
id
content
}
}
\`;

Работа с авторизацией

REST

axios.get('/profile', {
headers: {
Authorization: \`Bearer ${token}\`
}
});

GraphQL

const client = new ApolloClient({
uri: 'https://api.example.com/graphql',
request: async (operation) => {
const token = await AsyncStorage.getItem('token');
operation.setContext({
headers: {
Authorization: \`Bearer ${token}\`
}
});
},
cache: new InMemoryCache()
});

Повтор запросов и обновление

  • В REST можно использовать axios-retry или вручную реализовать повтор при ошибках.

  • В GraphQL можно применять refetch() или pollInterval.

Инструменты отладки

  • Reactotron — поддерживает отслеживание сетевых запросов

  • Flipper — отладка через плагин Network и Apollo DevTools

  • Chrome DevTools — можно использовать через debug JS remotely

Работа в оффлайн-режиме

  • Храните данные в AsyncStorage или SQLite

  • Используйте библиотеки:

    • react-query — кэш, refetch, фоновая синхронизация

    • [apollo-link-offline] — кэш GraphQL и работа в оффлайн

Дополнительные библиотеки

REST

  • react-query — асинхронный data layer

  • swr — стратегия cache-first

  • axios-cache-interceptor — кэширование запросов

GraphQL

  • urql — лёгкая альтернатива Apollo

  • graphql-request — минималистичная библиотека

  • Relay — масштабируемый GraphQL-клиент от Meta

Работа с API в React Native строится на асинхронных запросах к серверу с последующей обработкой ответов. Для REST чаще применяются fetch или axios, для GraphQL — Apollo Client или urql. В обоих случаях важно учитывать управление состояниями, кэшированием, авторизацией и ошибками, а также оптимизировать работу с сетью и данными для обеспечения высокой отзывчивости и надёжности приложения.

08-08-2025
Medium 12 просмотров