graphql vue apollo 的本地状态管理答案

【问题标题】：local state management for graphql vue apollographql vue apollo 的本地状态管理
【发布时间】：2020-03-12 18:09:59
【问题描述】：

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

【问题讨论】：

标签： graphql vue-apollo apollo-cache-inmemory

【解决方案1】：

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

以防万一，这些想法可能会对您有所帮助。如果他们不这样做，我很抱歉。

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

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 请求添加更新方法之前，我自己的实现无法正常工作：

apollo: {
  todoItems: {
    query: todoItemsQuery,
    update: data => data.todoItems
  }
},

【讨论】：