每当发生突变时,我都尝试刷新/更新查询。但是由于某种原因,它不会发生。
我尝试了几种方法:
在我的<Query>
上使用pollInterval =“ 500”
在我的<Mutation>
上声明updateCache函数
只是想知道是否有人能够帮助我解决问题。
我愿意接受任何建议
非常感谢!
const GET_FIELD_BY_FORM_ID = gql`
query field($formID: String!){
field(formID: $formID){
fieldID,
formID,
}
}
`;
const CREATE_FIELD = gql `
mutation fieldCreate($formID: String!, $order: Int, $value: String, $label: String, $section: String){
fieldCreate(formID:$formID, order: $order, value:$value, label:$label, section:$section){
value
order
fieldID
formID
}
}
`;
const updateCache = (cache, { data: {fieldCreate}}) => {
const {field} = cache.readQuery({ query: GET_FIELD_BY_FORM_ID, variables: {formID: "da096d11-b725-4b67-b8ca-e50c48dd0bda"} })
cache.writeQuery({
query: GET_FIELD_BY_FORM_ID,
data:{
field: field.concat(fieldCreate)
}
})
}
export default class NewEditor extends Component {
render() {
return (
<div>
<Query query={GET_FIELD_BY_FORM_ID} variables={{formID: this.props.match.params.formID}} pollInterval={500}>
{({ loading, error, data , startPolling, stopPolling }) => {
if (loading) return "Loading...";
if (error) return `Error! ${error.message}`;
return (
<div>
{data.field.map(field => (
<li key={field.fieldID}>{field.fieldID}| {field.label} | {field.order}</li>
))}
</div>
)
}}
</Query>
<Mutation mutation={CREATE_FIELD} update={updateCache}>
{(createField, { data}) => (
<div>
<form
onSubmit={async e => {
e.preventDefault();
await createField({ variables: { formID: this.props.match.params.formID, label:"newly generated", section: "header", order: 9} });
}}
>
<button type="submit">Add Todo</button>
</form>
</div>
)}
</Mutation>
</div>
)}};
最佳答案
您需要订阅才能收听由任何突变所做的任何更改。这是一个PubSub实现,您可以在其中插入任何实体或“主题”(在Kafka中是类比),并且您将收到具有已更改数据的突变事件。
有关详细信息,请参见https://www.apollographql.com/docs/graphql-subscriptions/。
关于javascript - React Apollo查询和突变组件不会获取新数据,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50111920/