В этом сообщении блога мы рассмотрим различные методы получения элементов по их идентификатору из бэкэнда Strapi с использованием GraphQL в приложении React. Мы углубимся в примеры кода и объясним каждый метод в разговорной форме, чтобы вам было легче его понять и реализовать в своих проектах.

Метод 1: использование запроса GraphQL

Первый метод включает отправку запроса GraphQL на серверную часть Strapi с указанием идентификатора элемента, который вы хотите получить. Вот пример того, как этого можно добиться в компоненте React:

import { useQuery, gql } from '@apollo/client';
const GET_ITEM_BY_ID = gql`
  query GetItemById($id: ID!) {
    item(id: $id) {
      id
      name
      description
      // Add other fields you want to retrieve
    }
  }
`;
const ItemDetails = ({ itemId }) => {
  const { loading, error, data } = useQuery(GET_ITEM_BY_ID, {
    variables: { id: itemId },
  });
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;
  const { item } = data;
  return (
    <div>
      <h2>{item.name}</h2>
      <p>{item.description}</p>
      {/* Render other details */}
    </div>
  );
};

В этом примере мы определяем запрос GraphQL под названием GetItemById, который принимает переменную id. Мы используем перехватчик useQueryиз клиента Apollo для выполнения запроса, передавая itemIdв качестве переменной. Данные ответа затем отображаются в компоненте.

Метод 2: использование Strapi SDK

Другой подход — использовать Strapi SDK для извлечения элементов по идентификатору. Этот метод позволяет обойти GraphQL и напрямую взаимодействовать с REST API Strapi. Вот пример того, как этого можно добиться:

import { useEffect, useState } from 'react';
import Strapi from 'strapi-sdk-javascript';
const strapi = new Strapi('http://localhost:1337');
const ItemDetails = ({ itemId }) => {
  const [item, setItem] = useState(null);
  useEffect(() => {
    const fetchItem = async () => {
      try {
        const response = await strapi.getEntry('items', itemId);
        setItem(response);
      } catch (error) {
        console.error(error);
      }
    };
    fetchItem();
  }, [itemId]);
  if (!item) return <p>Loading...</p>;
  return (
    <div>
      <h2>{item.name}</h2>
      <p>{item.description}</p>
      {/* Render other details */}
    </div>
  );
};

В этом примере мы используем пакет strapi-sdk-javascriptдля создания экземпляра Strapi. Затем мы извлекаем элемент по идентификатору, используя метод getEntry, предоставляемый SDK. Данные элемента сохраняются в состоянии компонента и отображаются, как только они станут доступны.

Метод 3: собственный запрос GraphQL в Strapi

Если вам нужен больший контроль над запросом GraphQL, вы можете создать собственный преобразователь в Strapi для извлечения элемента по идентификатору. Вот пример того, как этого можно добиться:

1. В проекте Strapi перейдите к ./api/{contentType}/config/schema.graphql.js(замените {contentType}фактическим именем типа контента).
2. Добавьте следующую функцию преобразователя:

module.exports = {
  query: `
    itemById(id: ID!): Item
  `,
  resolver: {
    Query: {
      itemById: {
        resolverOf: 'application::item.item.findOne',
        resolver: async (obj, options, { context }) => {
          const { id } = options;
          const item = await strapi.query('item').findOne({ id });
          return item;
        },
      },
    },
  },
};

3. Перезапустите сервер Strapi.

Теперь вы можете использовать собственный запрос GraphQL itemByIdв своем приложении React для получения элемента по идентификатору.