Giới thiệu về Apollo Boost

Với nhiều điều ta đã xem xét về việc tạo API với GraphQL và Prisma trong các bài viết trước , ta chưa bao giờ thực sự áp dụng phần backend tùy chỉnh của bạn cho ứng dụng phía client . Trong bài viết này, bạn sẽ tìm hiểu cách cho phép user tương tác với phần backend của bạn thông qua các truy vấn và đột biến bằng cách sử dụng Apollo Boost , một gói cung cấp cho ta mọi thứ hữu ích để sử dụng Apollo Client.

Cài đặt

Tôi sẽ cố gắng thực hiện một cách tiếp cận tổng quát hơn và sử dụng Apollo mà không cần bất kỳ thư viện nào khác như React hoặc Vue. Vì vậy, ta sẽ chỉ cần một file HTML và JavaScript với trình gói bưu kiện để cho phép ta sử dụng các tính năng JavaScript mới nhất mà không cần tìm kiếm webpack. Ném vào babel-polyfill sẽ cho ta quyền truy cập vào async / await .

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

Cài đặt backend

Để tránh tập trung quá nhiều vào phần backend , tôi đã tạo phần khởi đầu này với một số trình giải quyết để bạn làm việc. Bạn cần cài đặt database Postgres, bạn có thể đọc ở đây và thêm thông tin đăng nhập vào file env .

Chỉ cần nhớ chạy điều này và bắt đầu dự án của bạn trong một terminal riêng biệt.

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

Hoặc nếu bạn không muốn loay hoay với phần backend tùy chỉnh, tôi khuyên bạn nên xem qua GraphCMS và tạo một mô hình bài đăng để chơi cùng.

Truy vấn

Kết nối với chương trình backend của ta không thể đơn giản hơn, chỉ cần đưa URI của ta vào ApolloBoost và bạn sẽ được kết nối tất cả. Nếu bạn đã từng làm việc với Gatsby trước đây, bạn hẳn đã rất quen thuộc với chức năng thẻ gql . Với gql và một số backtics, ta có thể cấu trúc các yêu cầu của bạn chính xác như cách ta thực hiện trong GraphQL Playground.

Bây giờ phương thức query của server của ta sẽ nhận yêu cầu của ta và trả về một lời hứa. Đẩy mọi thứ vào một div sẽ thực hiện cho việc hiển thị. Lưu ý đây vẫn là tất cả mã giao diện user , vì vậy ta truy cập trực tiếp vào các phần tử 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>

Đột biến

Đột biến dễ dàng như bạn tưởng tượng, chỉ cần tạo đột biến của bạn như bình thường và chuyển nó đến phương thức mutate của server . Ta thậm chí có thể gửi dữ liệu bằng biểu mẫu của bạn mà không cần cài đặt một server tiêu chuẩn, vì đây là tất cả phía client .

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());

Bớt tư tưởng

Đáng buồn thay, Apollo Boost thực sự không giúp ta nhiều trong việc đăng ký, điều này hóa ra là một quá trình phức tạp hơn đáng kể. Nhưng nhìn chung, Apollo Client khiến các yêu cầu tìm nạp lộn xộn có vẻ giống như làm việc với các tín hiệu khói 🔥.

Tags:

Các tin liên quan