如何保持数据同步在成员使用成员-阿波罗-客户端？

Question

我有一个使用Ember和余烬-阿波罗-客户构建的应用程序。

// 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-apollo-client。我继续使用apollo，因为它有更好的文档。

我想我不太懂怎么做。我是否应该以某种方式使用store与来自apollo的watchQuery相结合？或者是别的什么东西？

稍后编辑

Adi差一点就搞定了。

• 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')