Как добавить пользовательские методы API в Vue Storefront 2

Vue Storefront позволяет вам создать свой следующий сайт электронной коммерции за считанные минуты. Вы можете выбирать из множества платформ, таких как Magento, Shopify, Commercetools и многих других!

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

В этом руководстве я буду использовать интеграцию Vendure, но вы можете выбрать любую интеграцию электронной коммерции. Процесс одинаков для всех этих интеграций с небольшой разницей в зависимости от клиента API, который использует интеграция (либо Apollo GraphQL, либо Axios REST).

Код

Прежде всего, вам нужно зарегистрировать новое расширение в файле middleware.config.js:

module.exports = {
  integrations: {
    vendure: {
      location: '@vue-storefront/vendure-api/server',
      configuration: {
        api: {
          uri: process.env.GRAPHQL_API,
          // to be used later with authentication
          tokenMethod: process.env.TOKEN_METHOD
        }
      },
      extensions: (extensions) => [
        ...extensions,
        {
          name: 'test',
          extendApiMethods: {
            testApiMethod: async ({ client, config }) => {
              const result = await client.query({ query: gql`
              query products {
                products {
                  items {
                    id
                    customFields
                  }
                }
              }
              `, fetchPolicy: 'no-cache' })
              console.log(result)
            }
          }
        }
      ]
    }
  }
};
Вход в полноэкранный режим Выход из полноэкранного режима

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

Расширения будут принимать параметр, называемый extensions, и важно, чтобы в конечном возврате возвращались развёрнутые расширения. В противном случае расширения по умолчанию в интеграции могут перестать работать, поэтому не забудьте вернуть и их. Далее мы можем увидеть структуру нового расширения. Давайте рассмотрим ее более подробно:

{
  name: 'test',
  extendApiMethods: {
    testApiMethod: async ({ client, config }) => {
      const result = await client.query({ query: gql`
      query products {
        products {
          items {
            id
            customFields
          }
        }
      }
      `, fetchPolicy: 'no-cache' })
      console.log(result)
    }
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Прежде всего, нам нужно назвать наше новое расширение. Рекомендуется дать ему какое-то уникальное имя (например, fetch-multiple-products), но в данном случае я просто показываю тестовый пример. Далее, у нас будет объект extendApiMethods, где каждое свойство может представлять свой новый или расширенный метод API. Каждый метод API имеет доступ к деструктурированному параметру клиента. Этот параметр может быть использован для вызова определенных запросов, запросов или мутаций очень просто из фронтенда. В этом примере показано, как получить несколько продуктов из GraphQL API с помощью пользовательского метода API (новый метод, поскольку в Vendure не реализован этот запрос — продукты получаются с помощью другого запроса).

Затем вы можете использовать созданный метод API в своем компоненте или на странице, как показано ниже:

const { $vendure } = useVSFContext();

onSSR(async () => {
    await $vendure.api.testApiMethod()
});
Войти в полноэкранный режим Выйти из полноэкранного режима

Если все сработало правильно, вы должны увидеть результат запроса продуктов в консоли, где запущен проект.

Резюме

Молодцы! Вы только что реализовали совершенно новый метод API в своем проекте Vue Storefront 2. Эти знания позволят вам еще больше настроить его под нужды вашего бизнеса.

Оцените статью
devanswers.ru
Добавить комментарий