Как получить данные в React с API GraphQL

1656050654 kak poluchit dannye v react s api graphql

Давайте рассмотрим пять лучших способов получения данных с помощью React из API GraphQL.

Хотя существует несколько популярных библиотек, созданных для взаимодействия с API GraphQL из программы React, существует много различных способов получения данных с помощью GraphQL.

Я включил образцы кода, которые показывают, как получить или запрашивать данные в кратчайшем коде и как начать работу с каждым из этих различных методов соединения React с GraphQL.

Хотите создавать удивительные программы с помощью React и GraphQL от начала до конца? Смотрите React Bootcamp.

Начинаем

В этих примерах мы будем использовать API SpaceX GraphQL для получения и отображения последних 10 миссий SpaceX.

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

1. Клиент Apollo

Наиболее популярной и полной библиотекой GraphQL является Apollo Client.

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

Чтобы начать работу с Apollo Client, необходимо установить как основную зависимость Apollo Client, так и GraphQL:

npm install @apollo/client graphql

Идея клиента Apollo состоит в том, что он будет использоваться во всем вашем приложении. Для этого вы будете использовать специальный компонент Apollo Provider, чтобы передать созданный клиент Apollo вниз по всему дереву компонентов.

Когда вы создаете клиент Apollo, вам нужно указать a uri значение, а именно конечная точка GraphQL. Кроме того, нужно указать кэш.

Apollo Client имеет собственный кэш памяти, используемый для кэширования или локального хранения и управления вашими запросами и связанными с ними данными:

import React from "react";
import ReactDOM from "react-dom";
import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";

import App from "./App";

const client = new ApolloClient({
  uri: "
  cache: new InMemoryCache()
});

const rootElement = document.getElementById("root");
ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  rootElement
);

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

Поскольку вы просто спрашиваете данные здесь, вы будете использовать useQuery крючок.

Вы включите запрос GraphQL в качестве первого аргумента для написания вашего запроса. Вы воспользуетесь функцией gqlвыполняющий ряд вещей, например, дает вам подсветку синтаксиса редактора и функцию автоматического форматирования, если вы используете инструмент Prettier для своего проекта.

После выполнения этого запроса вы получите значение data, loadingи error:

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

const FILMS_QUERY = gql`
  {
    launchesPast(limit: 10) {
      id
      mission_name
    }
  }
`;

export default function App() {
  const { data, loading, error } = useQuery(FILMS_QUERY);

  if (loading) return "Loading...";
  if (error) return <pre>{error.message}</pre>

  return (
    <div>
      <h1>SpaceX Launches</h1>
      <ul>
        {data.launchesPast.map((launch) => (
          <li key={launch.id}>{launch.mission_name}</li>
        ))}
      </ul>
    </div>
  );
}

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

Вы также хотите обрабатывать любые возникающие ошибки. Вы можете смоделировать ошибку, совершив синтаксическую ошибку в своем запросе, например, запрашивая не существующее поле. Чтобы справиться с этой ошибкой, вы можете удобно вернуться и отобразить сообщение из error.message.

2. Urql

Еще одна полнофункциональная библиотека, соединяющая программы React с API GraphQL, – это urql.

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

Чтобы использовать urql в качестве клиентской библиотеки GraphQL, вам нужно установить пакеты urql и GraphQL.

npm install urql graphql

Так же, как и в Apollo, вы хотите использовать выделенный компонент Provider и создать клиент с вашей конечной точкой GraphQL. Обратите внимание, что вам не нужно указывать кэш из коробки.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { createClient, Provider } from 'urql';

const client = createClient({
  url: '
});

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider value={client}>
    <App />
  </Provider>,
  rootElement
);

Очень похож на Apollo, urql дает вам пользовательские хуки, которые возделывают все стандартные операции GraphQL, и потому имеют подобные названия.

Опять же, вы можете использовать useQuery хук из пакета urql. Хотя вместо того, чтобы нужна функция gqlвы можете сбросить его и просто использовать шаблонный литерал для написания запроса.

При звонке useQueryВы получаете обратно массив, который можно деструктурировать как массив, а не как объект. Первым элементом в этом массиве является объект, называемый resultчто дает вам ряд свойств, которые вы можете деструктурировать: data, fetchingи error.

import React from "react";
import { useQuery } from 'urql';

const FILMS_QUERY = `
  {
    launchesPast(limit: 10) {
      id
      mission_name
    }
  }
`;

export default function App() {
  const [result] = useQuery({
    query: FILMS_QUERY,
  });

  const { data, fetching, error } = result;

  if (fetching) return "Loading...";
  if (error) return <pre>{error.message}</pre>

  return (
    <div>
      <h1>SpaceX Launches</h1>
      <ul>
        {data.launchesPast.map((launch) => (
          <li key={launch.id}>{launch.mission_name}</li>
        ))}
      </ul>
    </div>
  );
}

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

3. React Query + GraphQL Request

На этом этапе важно отметить, что вам не нужна сложная, трудная клиентская библиотека GraphQL, например urql или Apollo, чтобы взаимодействовать с вашим API GraphQL, как мы увидим позже.

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

Имея это в виду, давайте посмотрим, как можно использовать очень сокращенную библиотеку GraphQL для получения данных и соединить это с лучшими средствами управления и кэширования этого состояния сервера, которое вы вводите в свою программу. Вы можете получить данные очень просто с помощью пакета graphql-request.

GraphQL Request — это библиотека, которая не требует настройки клиента или компонента поставщика. По сути это функция, которая просто принимает конечную точку и запрос. Очень похоже на клиент HTTP, вам просто нужно передать эти два значения, и вы получите свои данные.

Теперь, если вы хотите управлять этим состоянием в своем приложении, вы можете использовать отличную библиотеку, которая обычно используется для взаимодействия с Rest API – но она не менее полезна для API GraphQL – это React Query. Это дает вам несколько очень похожих имен React Hooks, useQuery и useMutationвыполняющие идентичные задания, выполняющие хуки Apollo и urql.

React Query также предоставляет множество инструментов для управления состоянием, а также интегрированный компонент Dev Tools, который позволяет видеть, что хранится во встроенном кэше React Query.

Объединив ваш базовый клиент GraphQL, запрос GraphQL, с React Query, вы получите всю мощность библиотеки, таких как urql или Apollo.

Чтобы начать эту пару, вам просто нужно установить React Query и GraphQL Request:

npm install react-query graphql-request

Вы используете компонент React Query Provider и создаете клиент запроса, где можно установить некоторые параметры получения данных по умолчанию, если хотите. Затем внутри самого компонента программы или каких-либо дочерних компонентов Appвы можете использовать useQuery крючок.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { QueryClient, QueryClientProvider } from "react-query";

const client = new QueryClient();

const rootElement = document.getElementById("root");
ReactDOM.render(
  <QueryClientProvider client={client}>
    <App />
  </QueryClientProvider>,
  rootElement
);

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

Поскольку вы получаете данные о запуске, давайте назовем этот запрос «запуски».

Вновь этот хук вернет результат выполнения этого запроса. Для второго аргумента к useQueryвам нужно указать, как получить эти данные, и React Query позаботится о решении обещания, которое возвращает запрос GraphQL.

import React from "react";
import { request, gql } from "graphql-request";
import { useQuery } from "react-query";

const endpoint = "
const FILMS_QUERY = gql`
  {
    launchesPast(limit: 10) {
      id
      mission_name
    }
  }
`;

export default function App() {
  const { data, isLoading, error } = useQuery("launches", () => {
    return request(endpoint, FILMS_QUERY);
  });

  if (isLoading) return "Loading...";
  if (error) return <pre>{error.message}</pre>;

  return (
    <div>
      <h1>SpaceX Launches</h1>
      <ul>
        {data.launchesPast.map((launch) => (
          <li key={launch.id}>{launch.mission_name}</li>
        ))}
      </ul>
    </div>
  );
}

Подобно Apollo, вы получаете обратно объект, который можно деструктурировать, чтобы получить значения для данных, а также о том, находится ли вы в состоянии загрузки и состоянии ошибки.

4. React Query + Axios

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

В этом случае можно использовать популярную библиотеку axios. Снова вы можете соединить его с React Query, чтобы получить все специальные крючки и управление состоянием.

npm install react-query axios

Использование клиента HTTP, такого как Axios, для выполнения запроса с API GraphQL требует выполнения запроса POST к конечной точке API. Для данных, которые вы посылаете в запросе, вы предоставляете объекту свойство под названием queryкоторый будет установлен для запроса о фильмах.

С axios вам нужно будет включить немного больше информации о том, как решить это обещание и вернуть свои данные. Вам нужно сообщить React Query, где находятся данные, чтобы их можно было поместить на data собственность, что useQuery возвращается.

В частности, вы получаете данные обратно в свойстве data of response.data:

import React from "react";
import axios from "axios";
import { useQuery } from "react-query";

const endpoint = "
const FILMS_QUERY = `
  {
    launchesPast(limit: 10) {
      id
      mission_name
    }
  }
`;

export default function App() {
  const { data, isLoading, error } = useQuery("launches", () => {
    return axios({
      url: endpoint,
      method: "POST",
      data: {
        query: FILMS_QUERY
      }
    }).then(response => response.data.data);
  });

  if (isLoading) return "Loading...";
  if (error) return <pre>{error.message}</pre>;

  return (
    <div>
      <h1>SpaceX Launches</h1>
      <ul>
        {data.launchesPast.map((launch) => (
          <li key={launch.id}>{launch.mission_name}</li>
        ))}
      </ul>
    </div>
  );
}

5. React Query + Fetch API

Самый простой способ из всех этих разных подходов к получению данных – это просто использовать запрос React плюс API выборки.

Поскольку API fetch включен во все современные браузеры, вам не нужно устанавливать стороннюю библиотеку – вам нужно только установить react-query в вашей заявке.

npm install react-query

После того, как клиент React Query будет предоставлен для всей программы, вы можете просто заменить свой код axios с помощью fetch.

Несколько отличается то, что вам нужно указать заголовок, содержащий тип содержимого данных, которые вы хотите вернуть из своего запроса. В этом случае это данные JSON.

Вам также нужно объединить объект, который вы посылаете как полезную нагрузку, с помощью свойства запроса, устанавливаемого для вашего запроса о фильмах:

import React from "react";
import axios from "axios";
import { useQuery } from "react-query";

const endpoint = "
const FILMS_QUERY = `
  {
    launchesPast(limit: 10) {
      id
      mission_name
    }
  }
`;

export default function App() {
  const { data, isLoading, error } = useQuery("launches", () => {
    return fetch(endpoint, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ query: FILMS_QUERY })
    })
      .then((response) => {
        if (response.status >= 400) {
          throw new Error("Error fetching data");
        } else {
          return response.json();
        }
      })
      .then((data) => data.data);
  });

  if (isLoading) return "Loading...";
  if (error) return <pre>{error.message}</pre>;

  return (
    <div>
      <h1>SpaceX Launches</h1>
      <ul>
        {data.launchesPast.map((launch) => (
          <li key={launch.id}>{launch.mission_name}</li>
        ))}
      </ul>
    </div>
  );
}

Одним из преимуществ использования axios перед выборкой является то, что он автоматически обрабатывает ошибки за вас. С помощью выбора, как вы можете видеть в коде выше, нужно проверить определенный код статуса, в том числе код статуса более 400.

Это означает, что в вашем запросе возникла ошибка. Если это так, вам нужно вручную бросить ошибку, которая будет перехвачена вашим useQuery крючок. В противном случае, если это ответ с диапазоном 200 или 300, что означает, что запрос был успешным, просто верните данные JSON и отобразите их.

Вывод

Эта статья была посвящена тому, чтобы показать вам ряд разных подходов к эффективному получению данных с API GraphQL с помощью React.

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

Нравится эта публикация? Присоединяйтесь к React Bootcamp

Буткемп React берёт все, что вам нужно знать об изучении React, и объединяет его в один комплексный пакет, включая видео, шпаргалки и специальные бонусы.

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

Буткемп React
Нажмите здесь, чтобы получить уведомление, когда он откроется

Добавить комментарий

Ваш адрес email не будет опубликован.