Question

我试图在发生突变时刷新/更新我的查询。但由于某种原因，它不会发生。

我尝试了几种方法：

使用pollInterval =＆＃34; 500＆＃34;在我的<Query>
在<Mutation>

只是想知道是否有人能够帮助我解决它。我打开任何建议

非常感谢！

＆＃13;

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>
)}};

＆＃13;

Answer 1

您需要订阅才能收听任何突变所做的任何更改。它是一个PubSub实现，您可以在其中挂钩任何实体或＆＃34;主题＆＃34; （在Kafka中比喻）并且您将收到包含更改数据的突变事件。

查看https://www.apollographql.com/docs/graphql-subscriptions/了解详情。

React Apollo Query and Mutation Component无法获取新数据

1 个答案: