местное управление государством для graphql vue apollo

Question

Я пытаюсь выполнить локальное управление государством с помощью vue apollo, но даже после выполнения документации я не получаю результата. В консоли нет ошибки, поэтому я не уверен, что не так.

Вот моя установка:

// 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);
        });
    },

У меня пустые элементы todoItem, ошибок нет.

Пожалуйста, дайте мне знать, что мне не хватает, я не понимаю какую-то концепцию, я думаю, и если есть способ использовать vuex с apollo, я тоже могу это сделать.

Answer 1

Предисловие: Я не специалист по Аполлону, только начинаю им пользоваться.

На всякий случай эти мысли могут вам помочь. Если они этого не сделают, что ж, мне очень жаль.

В main.js: документация Apollo предоставляет несколько иную настройку при использовании Apollo Boost (https://www.apollographql.com/docs/link/links/state/). На всякий случай вот как я настроил свою реализацию до сих пор.

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