代码之家 › 专栏 › 技术社区 › Sabbiu Shah

对同一对象应用变异后,在<Query>中返回空数据对象

react-apollo graphql

Sabbiu Shah · 技术社区 · 6 年前

"apollo-boost": "^0.1.13",
"apollo-link-context": "^1.0.8",
 "graphql": "^0.13.2",
"graphql-tag": "^2.9.2",
"react-apollo": "^2.1.11",

当前代码结构

<div>
<Query
    query={FETCH_CATEGORIES_AUTOCOMPLETE}
    variables={{ ...filters }}
    fetchPolicy="no-cache"
  >
    {({ loading, error, data }) => {
      console.log('category', loading, error, data); // _______Label_( * )_______
      if (error) return 'Error fetching products';

      const { categories } = data;

      return (
        <React.Fragment>
          {categories && (
            <ReactSelectAsync
              {...this.props.attributes}
              options={categories.data}
              handleFilterChange={this.props.handleCategoryFilterChange}
              loading={loading}
              labelKey="appendName"
            />
          )}
        </React.Fragment>
      );
    }}
  </Query>

<Mutation mutation={CREATE_CATEGORY}>
  {createCategory => (
    <div>
    // category create form
    </div>
  )}
</Mutation>
</div>

最初,查询获取数据,我得到数据中的类别列表 given in Label_( * ) . Issue: 然后,突然,在 Label_( * ) ,数据对象为空。

编辑

{
  "data": {
    "categories": {
      "page": 1,
      "rows": 2,
      "rowCount": 20,
      "pages": 10,
      "data": [
        {
          "id": "1",
          "appendName": "Category A",
          "__typename": "CategoryGETtype"
        },
        {
          "id": "2",
          "appendName": "Category B",
          "__typename": "CategoryGETtype"
        }
      ],
      "__typename": "CategoryPageType"
    }
  }
}

类别创建

{
  "data": {
    "createCategory": {
      "msg": "success",
      "status": 200,
      "category": {
        "id": "21",
        "name": "Category New",
        "parent": null,
        "__typename": "CategoryGETtype"
      },
      "__typename": "createCategory"
    }
  }
}

2 回复 | 直到 6 年前

amcvitty 6 年前

(我在面对一个类似的问题时遇到了这个问题,现在我已经解决了)

在Apollo中,当一个变异返回在另一个查询中使用的数据时,该查询的结果将被更新。e、 g.返回所有TODO的查询

query { 
  todos { 
    id
    description
    status
  }
}

mutation CompleteTodo {
  markCompleted(id: 3) { 
    todo { 
      id
      status
    }
  }
}

结果是

{ 
  todo: {
    id: 3,
    status: "completed"
    __typename: "Todo" 
  }
}

然后id为1的todo项将更新其状态。当变异告诉查询它过时了,但是没有提供足够的信息来更新查询时,问题就来了。例如

query {
  todos { 
    id
    description
    status
    owner { 
      id
      name
    }
  }
}

和

mutation CompleteTodo {
  assignToUser(todoId: 3, userId: 12) { 
    todo { 
      id
      owner {
        id
      }
    }
  }
}

示例结果:

{ 
  todo: {
    id: 3,
    owner: { 
      id: 12, 
      __typename: "User"
    }, 
    __typename: "Todo"
  }
}

假设你的应用程序以前对用户:12。事情是这样的

的缓存用户:12包含只是 {id:12}
如果不重新提取(默认情况下不会发生),查询就无法为所有者提供名称字段的准确信息。它会更新以返回 data: {}

可能的解决方案

更改突变的返回查询以包含查询所需的所有字段。
手动更新缓存

https://www.apollographql.com/docs/angular/features/cache-updates.html

向@clment prvost致敬,因为他的评论提供了一个线索:

获取相同实体的查询和突变必须查询相同的实体领域。这是一种避免本地缓存问题的方法。

Sabbiu Shah 6 年前

fetchPolicy cache-and-network Link to fetchPolicy Documentation

为此,我还必须执行refetch查询。