React Apollo：突变后存储更新，但ui不反映变化

Question

我创建了一个具有以下架构的graphQL服务器：

...
#charts interface
interface Chart {
  id: String!
  sql: String!
  title: String
  type: String!
  display: String!
}
type Layout{
  # Unique layout id
  id: String
  # The title displayed on the layout tab
  title: String
  # List of displayed charts
  charts: [Chart]
}
...

在我的客户端上，我有一个<SummaryLayout/>组件，其中包含以下gql查询：

gql`{
layout(id:"summary"){
  title
  charts {
    id,
    title,
    type,
    display
  }
}}`

加载页面时，布局组件会将所有图表显示为页面上的网格。用户以后可以添加新图表，因此我有2个突变：一个创建图表，另一个是将新图表添加到布局：

const addToLayout = gql`
mutation addToLayout($layoutID: String!, $chartID: String!) {
  addToLayout(layoutID: $layoutID ,chartID:$chartID){
    id
    charts {
      id
      sql
      title
      type
      display
    }
  }
}`;

const addChart = gql`
mutation addChart($chartConfig:ChartConfig!) {
  addChart(chartConfig:$chartConfig){
    id
    display
  }
}`;

this.props.addChart({
    variables: {chartConfig: chartConfig}
    }).then((response) => {
       const chartID = response.data.addChart.id;
       console.log("Chart added, DB ID:", chartID);
       this.props.addToLayout({
            variables: {layoutID: "summary", chartID: chartID},
            update: (store, data) => {
              console.log("STORE:",store);
            }
          }).then((response) => {
            appState.toggleDialog(false);
          })
     });

当我记录商店时，我可以看到Layout:summary条目已更新，但它没有反映在UI上，另外还有一个问题是还有一个名为$ROOT_QUERY.layout({"id":"summary"})的条目是没有使用新数据更新：

我错过了什么？

Answer 1

From the docs：

  

默认情况下，InMemoryCache将尝试使用常见的id和_id主键作为唯一标识符（如果它们与对象上的__typename一起存在）。

     

如果未指定id和_id，或者未指定__typename，则InMemoryCache将回退到查询中对象的路径，例如ROOT_QUERY.allPeople.0，以获取allPeople根查询返回的第一条记录。这将使得给定类型的数据为allPeople查询和其他查询的范围必须获取它们自己的单独对象。

Apollo使用生成的密钥来确定解决突变时要更新的内容。它归结为你的查询和突变都需要包含id。这样，两者使用的生成密钥将是相同的。在您的代码中，看起来突变包括布局的id，但查询不包含。

如果由于某种原因，ID无法使用，您可以使用dataIdFromObject选项来标识要关闭的其他字段。