React Apollo Query and Mutation Component не будет получать свежие данные - PullRequest
Новая
       14

React Apollo Query and Mutation Component не будет получать свежие данные

0 голосов
/ 01 мая 2018

Я пытаюсь обновить / обновить мой запрос, когда произошла мутация. Но по какой-то причине этого не произошло.

Я попробовал пару способов:

  1. используя pollInterval = "500" на моем <Query>
  2. объявление функции updateCache на моем <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>
)}};

1 Ответ

0 голосов
/ 01 мая 2018

Вам понадобится подписка для прослушивания любых изменений, внесенных любыми мутациями. Это реализация PubSub, где вы можете подключиться к любой сущности или «теме» (аналогия с Kafka), и вы получите события мутации с измененными данными.

Подробнее см. https://www.apollographql.com/docs/graphql-subscriptions/.

...