我在将 apollo/graphql 集成到新项目中时遇到问题。
我有一个组件 BrandsList,用于列出品牌。在此组件中,您可以单击一个品牌以访问每个品牌的更新表单以更新其信息。
这是更新表格:
import React, { useState, useEffect } from "react";
import { graphql } from "react-apollo";
import gql from "graphql-tag";
import { UPDATE_BRAND } from "./../../../api/brands/mutations";
import { Form, Button, Dropdown, TextArea } from "semantic-ui-react";
import { useQuery, useMutation } from "@apollo/react-hooks";
const brandQuery = gql`
query Brand($brandId: String) {
brand(_id: $brandId) {
_id
name
url
description
brandType
openingDate
closingDate
origin
region
address
}
}
`;
const UpdateBrand = props => {
const [values, setValues] = useState({
_id: "",
name: "",
url: "",
description: "",
origin: "",
region: "",
brandType: "",
openingDate: "",
closingDate: "",
address: ""
});
const onChange = e => {
const { name, value } = e.target;
setValues({ ...values, [name]: value });
};
const { loading, error, data, refetch } = useQuery(brandQuery, {
variables: { brandId: props.match.params.brandId }
});
useEffect(() => {
if (data) {
setValues({ ...data.brand });
}
}, [data]);
const [updateBrand, { brand }] = useMutation(UPDATE_BRAND);
const onChangeDropDown = (e, { value }) =>
setValues({ ...values, brandType: value });
const onSubmit = e => {
e.preventDefault();
let {
_id,
name,
url,
description,
origin,
region,
brandType,
openingDate,
closingDate,
address
} = values;
updateBrand({
variables: {
brandId: _id,
name,
url,
description,
origin,
region,
brandType,
openingDate,
closingDate,
address
}
})
.then(() => props.history.push("/admin/brands"))
.catch(err => console.log(err));
};
return (
<div className="createBrand">
<h1>Add a Brand</h1>
/* BORING STATE CONTROLLED FORM */
<Button type="submit" form="createBrandForm">
Update
</Button>
</Form>
</div>
);
};
export default UpdateBrand;
一般来说它运行良好,不确定使用 useEffect 将查询结果带入我的本地状态是否是最有效的,但它确实有效。我可以修改我的表单并重新提交,并且数据库中的数据会发生更改。然而,当我通过 props.history.push 返回到/admin/brands 时,数据没有更新,我必须进行硬刷新。
我的突变解析器是这样的:
updateBrand(obj, args, context) {
if (!context.user || !context.user.isAdmin) {
throw new Error("You have to be an admin to update a brand");
} else if (context.user.isAdmin) {
let {
brandId,
name,
url,
description,
origin,
region,
brandType,
openingDate,
closingDate,
address
} = args;
Brands.update(
{ _id: brandId },
{
$set: {
name,
url,
description,
origin,
region,
brandType,
openingDate,
closingDate,
address
}
}
);
return Brands.findOne({ _id: brandId });
}
},
因此,根据文档,我返回更新后的单个对象,该对象应强制更新缓存以修改单个实体。然而事实并非如此。关于如何在每次修改后更新数据有什么想法吗?
这是突变代码:
export const UPDATE_BRAND = gql`
mutation updateBrand(
$brandId: String!
$name: String!
$url: String
$description: String
$origin: String
$region: String
$brandType: String
$openingDate: String
$closingDate: String
$address: String
) {
updateBrand(
brandId: $brandId
name: $name
url: $url
description: $description
origin: $origin
region: $region
brandType: $brandType
openingDate: $openingDate
closingDate: $closingDate
address: $address
) {
_id
}
}
`;
这里是架构部分:
type Mutation {
createBrand(
name: String!
url: String
description: String
origin: String
region: String
brandType: String
openingDate: String
closingDate: String
address: String
): Brand
updateBrand(
brandId: String!
name: String!
url: String
description: String
origin: String
region: String
brandType: String
openingDate: String
closingDate: String
address: String
): Brand
deleteBrand(brandId: String!): Boolean
}
最佳答案
我的错误是在我的 graphQL 查询代码中,按照 @Herku 的建议进行更新突变。我只在更新后发回 _id,而不发回其余数据。更改为以下内容解决了问题:
export const UPDATE_BRAND = gql`
mutation updateBrand(
$brandId: String!
$name: String!
$url: String
$description: String
$origin: String
$region: String
$brandType: String
$openingDate: String
$closingDate: String
$address: String
) {
updateBrand(
brandId: $brandId
name: $name
url: $url
description: $description
origin: $origin
region: $region
brandType: $brandType
openingDate: $openingDate
closingDate: $closingDate
address: $address
) {
_id
name
url
description
origin
region
brandType
openingDate
closingDate
address
}
}
`;
关于meteor - Apollo/GraphQl - 单个实体突变不更新缓存(数据库更新),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58668870/