每一本书籍对应一个查询（即一个 HTTP 请求），当从未登录状态切换到登录状态时，主页所有已经加载的书籍都会发送请求，判断它是否在当前用户的书架上。

理想的实现中，在用户登录后，应该只发送一个请求，用于获取书单信息流。

改进

后端

1. 将查询 isBookInBookshelf 移动到 Book 类型下

1
2
3
4
5
6

const bookType = `
  type Book {
    ...
    isBookInBookshelf(userId: ID!): Boolean!
  }
`;

2. 实现该字段的 resolver 函数

1
2
3
4
5
6
7
8
9
10
11

const bookResolver = {
  ...
  Book: {
    ...
    isBookInBookshelf: async({ id }, { userId } , { models }) => {
      if(userId === "") return false;
      const user = await models.User.findById(userId);
      return user.bookShelf.indexOf(id) !== -1;
    }
  }
};

记录开发 duozhuavue💚 时对 Apollo Client 缓存的处理方法。

为什么要处理缓存？

修改数据后，如果不对缓存中的数据进行修改，那么会造成服务器端和客户端的数据不一致，修改也不能在前端得到体现。

在 duozhuavue💚 中，需要处理缓存的地方有书籍评论，用户书架，主页信息流分页。

缓存处理方法

Apollo Client 提供了几种方式与缓存数据交互

• 使用 GraphQL queries
• 使用 GraphQL fragments
• 直接修改缓存对象的字段
• 配置缓存字段策略

结合开发过程中的具体情况，处理缓存数据时可以采取不同的方式。

书籍评论

后端定义

后端代码中 Book 的 schema 定义如下：

1
2
3
4
5
6

type Book {
  id: ID!
  title: String!
    ...
  comments: [Comment!]
}

有用的信息是，Book 的 comments 字段返回该书的评论列表。

主要记录开发duozhuavue💚时对一些文本过长情况的处理方法。

假设

• 后台服务器对数据的文本长度没有限制、处理
• 在前端页面利用 CSS 处理文本溢出

多抓鱼

以下是多抓鱼部分页面遇到过长用户名时的情况。
测试文本：“这是一个非常长的ID用来测试布局溢出，正常情况最后会出现三个点，而且不会把其它内容推出屏幕”。

记录开发duozhuavue💚主页的分页功能时的实践。

关于分页

分页的样子

1. 有编号的分页

   

2. 无编号，点击加载

   

3. 无编号，滚动加载

   

写 duozhuavue💚 主页面时，希望书籍类别的 Title 在 sticky 生效时，添加一个下边界。

效果

样例预览

Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。

基本步骤

1. 确定目标元素、根元素
2. 设置监听回调（利用相交的比例或者变化）
3. 监听

问题

• 设置根元素时使用了固定大小的像素，意味着只有在全屏下样式才会生效
• 第二个粘性元素生效时，第一个粘性元素的样式并没有移除，样例中它藏在了 .dogs 元素的下面，不会影响观感。

参考

• css tricks
• Intersection Observer API
• IntersectionObserverEntry.isIntersecting