如何使用烬阿波罗客户端保持同步灰烬数据？

Question

我一直在使用Ember和ember-apollo-client内置的应用程序。

// templates/collaborators.hbs

// opens an ember-bootstrap modal
{{#bs-button type="success" onClick=(action (mut createCollaborator) true)}}Create collaborator{{/bs-button}}
// submit button in modal triggers "createCollaborator" in controller    

{{#each model.collaborators as |collaborator|}}
    {{collaborator.firstName}} {{collaborator.lastName}}
{{/each}}

// routes/collaborators.js
import Route from '@ember/routing/route';
import { RouteQueryManager } from 'ember-apollo-client';
import query from '../gql/collaborators/queries/listing';

export default Route.extend(RouteQueryManager, {
    model() {
        return this.get('apollo').watchQuery({ query }); 
    }
});

// controllers/collaborator.js
export default Controller.extend({
  apollo: service(),

  actions: {
    createCollaborator() {
      let variables = { 
        firstName: this.firstName, 
        lastName: this.lastName, 
        hireDate: this.hireDate 
      }

      return this.get('apollo').mutate({ mutation, variables }, 'createCollaborator')
        .then(() => {
          this.set('firstName', '');
          this.set('lastName', '');
          this.set('hireDate', '');
      });
    }
  }
});

目前，创建一个合作者后的数据是陈旧的，需要以更新浏览器刷新。我想变化是合作者名单上可见的时候了。

从我的理解，为了与Ember使用GraphQL，我应该使用与Ember Data ember-graphql-adapter或只是ember-apollo-client。我继续着，因为其更好的文档的apollo。

我不认为我很明白该怎么做。我应该以某种方式使用store从watchQuery apollo结合起来呢？或者是别的什么？

LATER EDIT

阿迪几乎钉它。

• mutationResult实际需要的是突变本身。
• 在store.writeQuery第二PARAM应该是data: { cachedData }或如下data。

离开这里这个，因为它可能会帮助别人。

return this.get('apollo').mutate({
    mutation: createCollaborator,
    variables,
    update: (store, { data: { createCollaborator } }) => {
      const data = store.readQuery({ query })

      data.collaborators.push(createCollaborator);

      store.writeQuery({ query, data });
    }
  }, createCollaborator');

Answer 1

您可以使用阿波罗势在必行商店API与此类似：

return this.get('apollo').mutate(
    { 
        mutation, 
        variables, 
        update: (store, { data: {mutationResult} }) => {
            const cachedData = store.readyQuery({query: allCollaborators})

            const newCollaborator = mutationResult; //this is the result of your mutation

            store.writeQuery({query: allCollaborators, cachedData.push(newCollaborator)})
        }
    }, 'createCollaborator')