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

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

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


Код

Прежде всего, вам необходимо зарегистрировать новый extension в 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 поскольку все остальное — это просто значение по умолчанию для правильной работы определенной интеграции.

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

{
  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 имеет доступ к деструктурированному параметру клиента. Затем этот параметр можно использовать для очень простого вызова определенных запросов, запросов или мутаций из внешнего интерфейса. В этом примере показано, как получить несколько продуктов из API GraphQL с помощью пользовательского метода API (в новом методе Vendure этот запрос не реализован — продукты извлекаются с использованием другого запроса).

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

const { $vendure } = useVSFContext();

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

Выйти из полноэкранного режима

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


Резюме

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