graphql vue apollo的本地状态管理

我正在尝试使用vue apollo进行本地状态管理,但是即使在following the docs之后,我仍然没有结果。控制台中没有错误,所以我不确定是什么错误。

这是我的设置:

// main.js file the initializing part

const client = new ApolloClient({
  link: ApolloLink.from([
    errorLink,authMiddleware,link,]),cache,typeDefs,resolvers,connectToDevTools: true,});
// resolvers file

import gql from 'graphql-tag';

import { todoItemsQuery } from './task.queries';

export const typeDefs = gql`
  type Item {
    id: ID!
    text: String!
    done: Boolean!
  }

  type Mutation {
    changeItem(id: ID!): Boolean
    deleteItem(id: ID!): Boolean
    addItem(text: String!): Item
  }
`;


export const resolvers = {
  Mutation: {
    checkItem: (_,{ id },{ cache }) => {
      const data = cache.readQuery({ query: todoItemsQuery });

      console.log('data res',data);
      const currentitem = data.todoItems.find(item => item.id === id);
      currentitem.done = !currentitem.done;
      cache.writeQuery({ query: todoItemsQuery,data });
      return currentitem.done;
    },},};

//queries file

import gql from 'graphql-tag';

export const todoItemsQuery = gql`
  {
    todoItems @client {
      id
      text
      done
    }
  }
`;

export const checkItemMutation = gql`
  mutation($id: ID!) {
    checkItem(id: $id) @client
  }
`;

// component where I call it

  apollo: {
    todoItems: {
      query: todoItemsQuery
    }
  },checkItem(id) {
      this.$apollo
        .mutate({
          mutation: checkItemMutation,variables: { id }
        })
        .then(({ data }) => {
          console.log("CACHE",data);
        });
    },

我得到空的todoItems,没有错误。

请让我知道我想念的是什么,我没有掌握我认为的一些概念,如果有一种方法可以将vuex与apollo一起使用,那么我也可以做到。

kuailedechongzi 回答:graphql vue apollo的本地状态管理

前言:我不是阿波罗专家,只是开始使用它。

以防万一,这些想法可能会对您有所帮助。如果没有,对不起。

在main.js中:使用Apollo Boost(https://www.apollographql.com/docs/link/links/state/#with-apollo-boost)时,Apollo文档提供的设置略有不同。以防万一,到目前为止,这就是我设置实现的方式。

import VueApollo from 'vue-apollo'
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from 'apollo-cache-inmemory';
const cache = new InMemoryCache();

Vue.use(VueApollo)
const apolloClient = new ApolloClient({
  //...whatever you may already have,clientState: {
    // "defaults" is your initial state - if empty,I think it might error out when your app launches but is not hydrated yet.
    defaults: {
      todoItems: [],}
    cache,typeDefs: {...yourTypeDefs},resolvers: {...yourResolvers},},});
const apolloProvider = new VueApollo({
  defaultClient: apolloClient,});

在您的typeDefs中:我看不到您的todoItems的查询类型:

type Query {
  todoItemsQuery: [Item]
}

在您的组件中:在向阿波罗请求中添加更新方法之前,我自己的实现无法正常工作

apollo: {
  todoItems: {
    query: todoItemsQuery,update: data => data.todoItems
  }
},
本文链接:https://www.f2er.com/3088068.html

大家都在问