Включение вашего приложения React с помощью клиента Apollo

Как мы можем использовать возможности Apollo Client в приложении React.

Введение

Создание приложений React, взаимодействующих с API-интерфейсами GraphQL, может значительно упроститься с помощью Apollo Client. Эта многофункциональная библиотека позволяет легко управлять запросами GraphQL, обеспечивает автоматическое обновление пользовательского интерфейса и поставляется с удобными инструментами. Давайте углубимся в то, как мы можем использовать возможности Apollo Client в приложении React.

Кикстарт с клиентом Apollo

Клиент Apollo создан для беспрепятственной обработки операций GraphQL (запросов, изменений и подписок) при обновлении пользовательского интерфейса в ответ на взаимодействие с сервером GraphQL. Он оснащен такими полезными функциями, как кэширование, оптимистичный пользовательский интерфейс, управление ошибками, а также поддержка разбивки на страницы и рендеринга на стороне сервера (SSR).

Перво-наперво, давайте установим необходимые пакеты. Выполните следующую команду в своем терминале:

npm install @apollo/client graphql

Интеграция клиента Apollo в приложение React

Чтобы интегрировать Apollo Client в ваше приложение React, вам необходимо создать экземпляр ApolloClient и включить в свое приложение React компонент ApolloProvider. Это делает экземпляр клиента доступным через дерево компонентов.

import React from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

// Apollo Client setup
const client = new ApolloClient({
  uri: 'https://my-graphql-server.com/graphql',
  cache: new InMemoryCache()
});

// Wrapping the App component with ApolloProvider
function App() {
  return (
    <ApolloProvider client={client}>
      {/* Your app components go here */}
    </ApolloProvider>
  );
}

export default App;

Создание запросов с помощью useQuery Hook

Клиент Apollo предоставляет хук useQuery, удобный инструмент для выполнения запросов GraphQL в ваших компонентах. Этот хук автоматически обновляет ваш пользовательский интерфейс полученными данными.

Давайте рассмотрим случай, когда нам нужно получить все статьи. Вот как вы можете использовать хук useQuery:

import React from 'react';
import { useQuery, gql } from '@apollo/client';

// GraphQL query
const GET_ARTICLES = gql`
  query GetArticles {
    articles {
      id
      title
    }
  }
`;

// Component to display articles
function ArticleList() {
  const { loading, error, data } = useQuery(GET_ARTICLES);

  // Handling the loading state
  if (loading) return <p>Loading...</p>;

  // Handling the error state
  if (error) return <p>Error :(</p>;

  // Returning the list of articles
  return data.articles.map(({ id, title }) => (
    <div key={id}>
      <p>
        {id}: {title}
      </p>
    </div>
  ));
}

export default ArticleList;

Обновление данных с помощью хука useMutation

Для обновления данных на вашем сервере Apollo Client предлагает хук useMutation. Этот хук возвращает функцию мутации, которую вы можете вызвать для выполнения мутации.

Допустим, мы хотим добавить статью:

import React from 'react';
import { useMutation, gql } from '@apollo/client';

// GraphQL mutation
const ADD_ARTICLE = gql`
  mutation AddArticle($title: String!) {
    addArticle(title: $title) {
      id
      title
    }
  }
`;

// Component to add articles
function AddArticle() {
  let input;
  const [addArticle, { data }] = useMutation(ADD_ARTICLE);

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault();
          addArticle({ variables: { title: input.value } });
          input.value = '';
        }}
      >
        <input
          ref={node => {
            input = node;
          }}
        />
        <button type="submit">Add Article</button>
      </form>
    </div>
  );
}

export default AddArticle;

Удаление данных с помощью useMutation Hook

Так же, как при создании или обновлении данных, Apollo Client также использует хук useMutation для удаления данных. Этот хук возвращает функцию мутации, которая выполняет мутацию при вызове.

Давайте рассмотрим сценарий, в котором мы хотим удалить статью. Вот как вы можете использовать useMutation:

import React from 'react';
import { useMutation, gql } from '@apollo/client';

// Define your mutation
const DELETE_ARTICLE = gql`
  mutation DeleteArticle($id: ID!) {
    deleteArticle(id: $id) {
      id
    }
  }
`;

// Component to delete articles
function DeleteArticle() {
  let input;
  const [deleteArticle, { data }] = useMutation(DELETE_ARTICLE);

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault();
          deleteArticle({ variables: { id: input.value } });
          input.value = '';
        }}
      >
        <input
          ref={node => {
            input = node;
          }}
        />
        <button type="submit">Delete Article</button>
      </form>
    </div>
  );
}

export default DeleteArticle;

В этом примере useMutation возвращает функцию deleteArticle, которую мы вызываем с идентификатором статьи, которую хотим удалить. После удаления статьи с сервера клиент Apollo автоматически обновляет кэш, чтобы отразить изменения в пользовательском интерфейсе.

Эта функция демонстрирует истинную мощь автоматического управления кешем Apollo Client, помогая поддерживать единый источник достоверной информации и обеспечивая синхронизацию пользовательского интерфейса с сервером.

💡 Помимо включения Apollo Client в свои приложения React, вы также можете рассмотреть возможность использования центра управления компонентами, такого как Bit, для оптимизации процесса разработки. Bit использует компонентный подход к разработке приложений. С помощью Bit вы можете извлекать повторно используемые компоненты или настраиваемые хуки из своей кодовой базы и использовать их в нескольких проектах с помощью простой команды.

Узнайте больше здесь:

Извлечение и повторное использование уже существующих компонентов с помощью добавления битов
Наконец-то вы выполнили задачу по созданию фантастического поля ввода для ввода в вашем приложении. Вы довольны…bit.dev

Повторная выборка данных и опрос с помощью клиента Apollo

Клиент Apollo также позволяет вам контролировать, как и когда вы хотите получать данные. Две стратегии, которые могут оказаться полезными, — это повторная выборка данных и опрос.

Повторная выборка данных

Повторная выборка данных полезна, когда вы хотите вручную получить последние данные с вашего сервера. Клиент Apollo предоставляет функцию refetch, возвращенную из useQuery, которую вы можете вызвать для повторного получения данных.

Вот пример, когда вы можете повторно получать статьи:

import { useQuery, gql } from '@apollo/client';

const GET_ARTICLES = gql`
  query GetArticles {
    articles {
      id
      title
    }
  }
`;

function ArticlesList() {
  const { loading, error, data, refetch } = useQuery(GET_ARTICLES);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <div>
      <button onClick={() => refetch()}>Refresh</button>
      <ul>
        {data.articles.map(article => (
          <li key={article.id}>{article.title}</li>
        ))}
      </ul>
    </div>
  );
}

В этом примере нажатие кнопки «Обновить» приведет к повторной загрузке статей с сервера.

Опрос

Опрос — еще одна стратегия для поддержания ваших данных в актуальном состоянии. Вместо того, чтобы вручную запускать повторную выборку, вы можете настроить хук useQuery для опроса сервера через определенный интервал.

Вот как вы можете опрашивать статьи каждые 5000 миллисекунд (5 секунд):

import { useQuery, gql } from '@apollo/client';

const GET_ARTICLES = gql`
  query GetArticles {
    articles {
      id
      title
    }
  }
`;

function ArticlesList() {
  const { loading, error, data } = useQuery(GET_ARTICLES, {
    pollInterval: 5000,
  });

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <ul>
      {data.articles.map(article => (
        <li key={article.id}>{article.title}</li>
      ))}
    </ul>
  );
}

В этом примере клиент Apollo будет автоматически отправлять запрос GET_ARTICLES на сервер каждые 5 секунд и обновлять пользовательский интерфейс последними данными.

Используя повторную выборку и опрос, вы можете гарантировать, что ваше приложение всегда отображает самые последние данные с вашего сервера.

Заключение

Включение Apollo Client в ваше приложение React открывает новый уровень интерактивности и динамизма. Он использует возможности GraphQL, предлагая такие функции, как интуитивно понятное кэширование, оптимистичный пользовательский интерфейс, разбиение на страницы и многое другое.

Хуки useQuery и useMutation обеспечивают простой способ интеграции операций GraphQL в ваши компоненты React. Это руководство представляет собой пример того, что возможно с помощью Apollo Client и React; многие другие примеры и ресурсы в документации по клиенту Apollo могут помочь вам в разработке эффективных, многофункциональных приложений React с помощью GraphQL. Продолжайте исследовать.

Удачного кодирования! 🚀

Создавайте приложения React с повторно используемыми компонентами, как Lego.

Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.

Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.

→ Подробнее

Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите: