Работа с Vue и Apollo GraphQL

Что такое GraphQL

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

Vue и Apollo GraphQL

Чтобы поговорить с бэкэндом GraphQL, обычно мы будем использовать клиент GraphQL, который предназначен для таких вещей. Написание запроса вручную в запросе POST или GET - это не то, что разработчики были бы счастливы сделать, поэтому эти клиенты здесь, чтобы упростить это. Доступно множество клиентов, и я предпочитаю использовать Apollo для его экосистемы и сообщества.

Для целей этого сообщения в блоге я предполагаю, что запрос GraphQL выглядит примерно так:

query Product($id: ID!) {
  product(id: $id) {
    title
    skuNo
    price
  }
}

Окончательный стабильный выпуск Vue 3 неизбежен, поэтому примеры кода, которые будут использоваться, будут в Vue 3. Однако синтаксис в основном будет таким же, если вы уже используете Composition API в Vue 2. В этой статье также не рассматривается использование популярная библиотека vue-apollo или @ vue / apollo-composable, поскольку они еще не работают с Vue 3 официально. Так что я буду использовать клиент Apollo напрямую, и именно так мы поступаем в нашей команде в Article. Мне лично нравится этот подход, поскольку он дает лучшее понимание того, как работают базовые модули, и мы можем лучше понять, какой модуль за что отвечает, когда мы вводим новые уровни.

Покажи мне код

Давайте сначала установим клиентский модуль Apollo, запустив:

# if you are using yarn
yarn add @apollo/client

#if you are using npm
npm install @apollo/client

Сначала я создаю файл JavaScript, который отвечает за создание клиента Apollo. Каждый раз, когда вам нужно отправить запрос GraphQL в вашем компоненте, вы должны использовать этот createApolloClient метод для получения экземпляра клиента Apollo. Если вы продолжите создавать новый экземпляр клиента Apollo, вы потеряете ранее накопленные кеши запросов.

import { ApolloClient, HttpLink } from '@apollo/client/core';
import { InMemoryCache } from '@apollo/client/cache';

let apolloClient = null;

export function createApolloClient() {
  if (apolloClient) {
    return apolloClient;
  }

  return apolloClient = new ApolloClient({
    link: new HttpLink({
      uri: "https://localhost:4001/graphql",
    }),
    cache: new InMemoryCache(),
  });
}

Свойство link в основном сообщает клиенту Apollo, куда он должен отправлять запросы или изменения. Вы также можете включить в запрос настраиваемые заголовки, такие как токен авторизации, с помощью метода setContext.

import { ref } from "vue";
import { createApolloClient } from '../apollo.js';
import { gql } from '@apollo/client/core';

export default {
  name: "PageQuery",
  setup() {
    const apolloClient = createApolloClient();
    const result = ref(null);

    async function query() {
      try {
        const queryResult = await apolloClient.query({
          query: gql`
            query product($productId: ID!) {
              product(id: $productId) {
                title
                skuNo
              }
            }
          `,
          variables: {
            productId: 123,
          }
        });

        result.value = queryResult.data;
      } catch(error) {
        console.error(error);
      }
    }

    return {
      result,
      query,
    };
  }
}
</script>

Composition API - это альтернатива текущему API параметров в Vue, цель которого - отделить вашу логику от вашего пользовательского интерфейса, а также позволить нам писать наш код более функциональным образом. Моя поездка на конференцию Vue Toronto должна помочь вам понять больше. ref, который я здесь использую, является частью Composition API, который в основном делает его реактивным. gql позволяет нам писать запросы GraphQL так же, как вы пишете на своей площадке. И мы импортируем метод createApolloClient для создания экземпляра клиента и, по сути, делаем функцию запроса, которую может использовать шаблон. В этом случае я настроил отправку запроса по событию щелчка:

<template>
  <div class="page-query">
    <button @click="query">Send Query</button>
    <div>{{ result }}</div>
  </div>
</template>

Ответ возвращается и сохраняет его в переменной result, а Vue обновляет шаблон.

Примечания

Когда мы создали этот клиент Apollo, мы предоставили ему экземпляр InMemoryCache, что означает, что по умолчанию он начнет кэшировать весь ранее запрошенный ответ, поэтому, если пользовательский интерфейс запросит тот же запрос, ему не нужно будет отправлять другой сетевой запрос и давать вам эта мгновенная обратная связь. Однако, если вам нужно каждый раз получать ответ на обновление, вы можете передать значение fetch-policy. Подробнее о других допустимых значениях вы можете прочитать в Apollo Doc. Имейте в виду, что официальный клиент Apollo подталкивает к работе с помощью React, но в этом посте я использую базовый клиент Apollo.

await apolloClient.query({
  query: gql`
    query product($productId: ID!) {
      product(id: $productId) {
        title
        skuNo
      }
    }
  `,
  variables: {
    productId: 123,
  },
  fetchPolicy: 'network-only'
});

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

Первоначально опубликовано на https://sdust.dev.