Основы GraphQL: как работает ApolloBoost

24 декабря, 2021 12:31 пп 73 views | Комментариев нет

| | Комментировать запись

В предыдущих материалах мы рассмотрели создание API-интерфейсов с помощью GraphQL и Prisma. Однако мы ни разу не применили серверный интерфейс к клиентскому приложению.

Читайте также:

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

Установка Apollo и зависимостей

Мы попробуем применить более общий подход и использовать Apollo без других библиотек типа React или Vue. Так что нам просто понадобится файл HTML и JavaScript с упаковщиком, чтобы мы могли использовать новейшие функции JavaScript. Пакет babel-polyfill даст нам доступ к async/await.

$ npm install parcel-bundler apollo-boost graphql babel-polyfill

Читайте также: Функции async/await в JavaScript

Настройка бэкэнда

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

Запустив все перечисленные выше вещи, вы можете запустить свой проект в отдельном терминале.

$ cd prisma
$ docker-compose up -d
$ prisma deploy
$ cd ../
$ yarn get-schema
$ yarn start

Если вы не хотите возиться с пользовательским бэкэндом, рекомендуем вам посетить GraphCMS и создать свою тестовую модель.

Запросы

Подключиться к бэкэнду очень просто. Нужно только добавить URI в ApolloBoost. Если вы работали с Gatsby раньше, вы уже должны быть хорошо знакомы с функцией gql. С помощью gql и нескольких кавычек мы можем структурировать запросы точно так же, как в GraphQL Playground.

Теперь метод query нашего сервера примет запрос и вернет промис. Для рендеринга можно разместить все в div. Имейте в виду, что это все еще код фронтэнда, поэтому мы напрямую обращаемся к элементам DOM.

Файл index.js:

import "babel-polyfill";
import ApolloBoost, { gql } from 'apollo-boost';

const server = new ApolloBoost({
  uri: 'http://localhost:4000/' // Or to you GraphCMS API
});

const query = gql`
  query {
    posts {
      title
      body
    }
  }
`;

const render = posts => {
  let html = '';

  posts.data.posts.forEach(post => {
    html += `
      <div>
      <h3>${post.title}</h3>
      <p>${post.body}</p>
      </div>
    `;
  });
  document.querySelector('#posts').innerHTML = html;
};

const getPosts = async query => {
  const server = new ApolloBoost({ uri: 'http://localhost:4000/' });

  const posts = await server.query({ query });
  render(posts);
};

getPosts(query);

Файл index.html:

<body>
  <div id="posts"></div>
</body>

Мутации

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

Файл index.html:

<body>
  <form id="form">
    <input type="text" name="title" placeholder="Title" />
    <input type="text" name="body" placeholder="Body" >
    <div class="controls">
      <button type="submit" id="submit">Submit</button>
      <button type="button" id="clearPosts">Clear All</button>
    </div>
    </form>

  <div id="posts"></div>
</body>

index.js:

const addPost = async data => {
  const mutation = gql`
    mutation {
      addPost(data: {
        title: "${data.title}",
        body: "${data.body}"
      }) {
        title
      }
    }
  `;

  await server.mutate({ mutation });
  getPosts(query);
};

const submit = document.querySelector('#submit');
const form = document.querySelector('#form');

submit.addEventListener('click', e => {
  e.preventDefault()

  addPost({
    title: form.elements.title.value,
    body: form.elements.body.value
  })

  form.reset()
});

Или:

const clearAll = async () => {
  const mutation = gql`
  mutation {
    clearPosts {
      count
    }
  }`;

  const count = await server.mutate({ mutation });
  console.log(`${count.data.clearPosts.count} item removed`);
  getPosts(query);
};

const clearBtn = document.querySelector('#clearPosts');
clearBtn.addEventListener('click', () => clearAll());

Заключение

К сожалению, от Apollo Boost не очень много толку при работе с подписками – это значительно более сложный процесс.

Читайте также: Основы Fetch API в JavaScript

Tags: , ,

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