每当发生突变时,我都尝试刷新/更新查询。但是由于某种原因,它不会发生。

我尝试了几种方法:


在我的<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/

10-12 01:10