如何在自定义插件的VueJS中使用Apollo?

时间:2019-02-14 09:04:15

标签: vue.js vuejs2 apollo-client vue-apollo

我正在使用Apollo访问graphql api的VueJS网站上工作。我不想在多个组件中进行相同的查询,而是将所有相关内容存储在自定义插件中,该插件可通过$apithis.$api

访问

我已经创建了它,但是它似乎不再运行查询,这是我做错了吗?这是我写的插件:

// api.js

import {
  ACTIVE_TICKET_QUERY,
  BACKLOG_QUERY,
  TODO_QUERY,
  IN_PROGRESS_QUERY,
  TO_REVIEW_QUERY,
  TO_DEPLOY_QUERY,
  DONE_QUERY,
  PEOPLE_QUERY,
  PROJECT_QUERY
} from '../constants/graphql'

const optionsDefaults = {
  data: {
    activeTickets: 0,
    backlog: {
      'issues': []
    },
    todo: {
      'issues': []
    },
    inProgress: {
      'issues': []
    },
    toReview: {
      'issues': []
    },
    toDeploy: {
      'issues': []
    },
    done: {
      'issues': []
    },
    people: {},
    projects: {}
  },
  methods: {
    combinedIssues () {
      return {
        'backlog': this.backlog ? this.backlog.issues : [],
        'todo': this.todo ? this.todo.issues : [],
        'inProgress': this.inProgress ? this.inProgress.issues : [],
        'toReview': this.toReview ? this.toReview.issues : [],
        'toDeploy': this.toDeploy ? this.toDeploy.issues : [],
        'done': this.done ? this.done.issues : []
      }
    },
    wipIssues () {
      return {
        fixer: {
          ...this.todo.issues,
          ...this.inProgress.issues
        },
        tester: {
          ...this.toReview.issues
        }
      }
    }
  },
  apollo: {
    activeTickets: {
      query: ACTIVE_TICKET_QUERY,
      pollInterval: 120000
    },
    backlog: {
      query: BACKLOG_QUERY,
      pollInterval: 120000
    },
    todo: {
      query: TODO_QUERY,
      pollInterval: 120000
    },
    inProgress: {
      query: IN_PROGRESS_QUERY,
      pollInterval: 120000
    },
    toReview: {
      query: TO_REVIEW_QUERY,
      pollInterval: 120000
    },
    toDeploy: {
      query: TO_DEPLOY_QUERY,
      pollInterval: 120000
    },
    done: {
      query: DONE_QUERY,
      pollInterval: 120000
    },
    people: {
      query: PEOPLE_QUERY,
      pollInterval: 120000
    },
    projects: {
      query: PROJECT_QUERY,
      pollInterval: 120000
    }
  }
}

export default {
  install (Vue, opts) {
    const options = { ...optionsDefaults, ...opts }

    Vue.prototype.$api = new Vue(options)
  }
}

0 个答案:

没有答案