Question

我有一个基本的graphql / apollo沙盒应用程序。

graphql server可以返回书籍列表

  const books = [
      {
        id: 1,
        title: "Harry Potter and the Sorcerer's stone",
        author: 'J.K. Rowling',
      },
      {
        id: 2,
        title: 'Jurassic Park',
        author: 'Michael Crichton',
      },
    ];

    // The GraphQL schema in string form
    const typeDefs = `
      type Query { books: [Book] }
      type Book { title: String, author: String, id: ID }
    `;

并且客户端获取它们

import React from 'react';
import './App.css';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

const elements = new Set();

const TodoApp = ({ data, data: { books, loading, error}}) => {
if (loading) {
  return <div>Loading</div>
}

if (error) {
  return <div>Error {error}</div>
}


return (
  <ul>
      {books.map((book, i) => {
        console.log(elements.has(book) ? `has` : `don't have`, book);
        elements.add(book);
        return (
          <MyLiPureComponent key={book.id} book={book} />
        )
      })}
    </ul>
  );
}

const query = gql`{
  books {
    id
    title
    author
  }
}`;

export default graphql(query)(TodoApp);

此代码会跟踪每本书的参考和输出（如果已经跟踪过它们）。当一次又一次地请求书籍列表时，输出显示每次所有书籍都是全新的对象。

我想避免这种情况，让apollo只创建一本书（然后将这些对象转发给我的组件）。我希望以后能够依赖于react的PureComponent（explained here），所以如果引用永远不相同，那就没有意义了。

从apollo的缓存中获取现有项目

0 个答案: