Question

我正在尝试使用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一起使用，那么我也可以做到。

Answer 1

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

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

在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
  }
},

graphql vue apollo的本地状态管理

1 个答案: