响应数据与从graphql服务器发送的数据不同。
目录页面
class Category extends React.Component{
state = {
data: null,
error: false,
}
async componentDidMount() {
const { category } = this.props.params
try {
const { data } = await client.query({
query: categoryQuery,
variables: {
title: category
}
})
console.log(data)
this.setState({ data: data.category })
} catch (err) {
this.setState({ error: true })
}
}
}
下面是categoryQuery的样子>
export const categoryQuery = gql`
query CATEGORIES($title: String!) {
category(input: { title: $title }) {
name
products {
id
name
inStock
gallery
brand
attributes {
id
name
type
items {
displayValue
value
id
}
}
prices {
amount
currency {
symbol
label
}
}
}
}
}
`;
响应对象如下>
{
"category": {
"name":"all",
"products":[...]
}
}
当我在componentDidMount时在Category Page中执行console.log(data)时，它记录了以下对象。每个产品的数据都是正确的，但id为"apple-imac-2021"的产品除外。是得到了错误的属性。服务器正在发送以下属性
"attributes": [
{
"id": "Capacity",
"name": "Capacity",
"type": "text",
"items": [
{
"displayValue": "256G",
"value": "256G",
"id": "256G"
},
{
"displayValue": "512G",
"value": "512G",
"id": "512G"
}
]
}
],
但是我收到了错误的属性。您可以查看属性项。它们是不同的。
{
"category": {
"name": "all",
"products": [
.....,
{
"id": "apple-imac-2021",
......
"attributes": [
{
"id": "Capacity",
"name": "Capacity",
"type": "text",
"items": [
{
"displayValue": "512G",
"value": "512G",
"id": "512G"
},
{
"displayValue": "1T",
"value": "1T",
"id": "1T"
}
]
}
],
},...
]
}
}
但是当我转到Network选项卡并看到响应对象一切正常时，我得到了正确的属性。有什么问题吗?
我有同样的问题，我通过在调用请求时禁用默认缓存来解决它。
const { data } = await client.query({
query: categoryQuery,
variables: {
title: category
}
}, {
fetchPolicy: "no-cache"
})
查看更多详细信息:https://www.apollographql.com/docs/react/caching/advanced-topics