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