ApolloBoost简介

尽管我们已经在之前的文章中讨论了使用 GraphQL 和 Prisma 创建 API，但我们从未真正将自定义后端应用到客户端应用程序。在本文中，您将学习如何让您的用户使用 Apollo Boost 通过查询和突变与您的后端进行交互，该软件包为我们提供了使用 Apollo 客户端所需的一切。

安装

我将尝试采用更通用的方法并在没有任何其他库（如 React 或 Vue）的情况下使用 Apollo。所以我们只需要一个带有 parcel bundler 的 HTML 和 JavaScript 文件，这样我们就可以使用最新的 JavaScript 功能，而无需摸索 webpack。投入 babel-polyfill 将使我们能够访问 async/await。

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

后端设置

为了避免过多地关注后端，我制作了 this starter 和一些解析器供您使用。您需要一个 Postgres 数据库设置，您可以在这里阅读，并将凭据添加到 env 文件中。

请记住运行它并在单独的终端中启动您的项目。

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

或者，如果您不想摸索自定义后端，我建议您查看 GraphCMS 并创建一个后期模型来玩。

查询

连接到我们的后端再简单不过了，只需将我们的 URI 输入 ApolloBoost 就可以了。如果你曾经使用过 Gatsby，那么你应该已经对 gql 标签功能非常熟悉了。使用 gql 和一些 backtics，我们可以完全按照我们在 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);

索引.html

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

突变

突变就像你想象的一样简单，只需像往常一样进行突变并将其传递给服务器的 mutate 方法。我们甚至可以在不设置标准服务器的情况下使用我们的表单提交数据，因为这已经是客户端。

索引.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 在订阅方面确实对我们没有太大帮助，结果证明这是一个复杂得多的过程。但总的来说，Apollo Client 让 fetch 请求看起来像是在处理烟雾信号🔥。