React Apollo 查询和突变组件不会获取新数据

Question

我正在尝试 refresh/update 每当发生突变时我的查询。但由于某种原因，它不会发生。

我尝试了几种方法：

在我的 <Query>
在我的 <Mutation>

只是想知道是否有人能够帮助我解决它。我愿意接受任何建议

非常感谢！

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

Answer 1

您需要订阅才能收听任何突变所做的任何更改。这是一个 PubSub 实现，您可以在其中连接到任何实体或 "topic"（Kafka 中的类比），您将收到包含更改数据的突变事件。

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

React Apollo 查询和突变组件不会获取新数据

React Apollo Query and Mutation Component won't fetch fresh data

javascript

reactjs

react-apollo

apollo-client