Question

我正在玩apollo，尤其是apollo-link-state，以取代redux的使用，并在一处处理本地和远程状态。

我遇到一个问题，我找不到有关如何处理嵌套状态的任何信息。

比方说，我希望有一个目的明确的状态。在那种情况下就是场景：

{
  Home: {
   todos: [],
    __typename: 'Home'
  }
}

然后在分解器中，我想进行一个突变以添加新的待办事项，因此状态将如下所示

{
  Home: {
   todos: [{
     id: 'unique_id',
     value: 'Some value',
     __typename: 'Todo',
   }],
    __typename: 'Home'
  }
}

我几乎可以通过以下代码实现：

const linkState = withClientState({
  cache,
  defaults: {
    Home: {
      todoBool: false,
      todos: [],
      __typename: 'Home',
    },
  },
  resolvers: {
    Mutation: {
      addTodo: (obj, { id, value }, { cache }) => {
        const result = cache.readQuery({
          query: READ_FROM_HOME,
        });
        const todos = [{ id, value, __typename: 'Todo' }, ...result.Home.todos];
        const data = {
          Home: {
            todos,
            __typename: 'Home',
          },
        };
        cache.writeQuery({
          query: READ_FROM_HOME,
          data,
        });
        return null;
      },
    },
  },
});

其中READ_FROM_HOME：

const READ_FROM_HOME = gql`
  query {
    Home @client {
      todos
    }
  }
`;

哪里缓存：

const cache = new InMemoryCache({ 
 if (data) return data.id ? `${data.__typename}:${data.id}` : data.__typename;
});

不幸的是，状态最终如下：

{
  Home: {
   todos: {
     type: 'json',
     json: Array(1)
   },
    __typename: 'Home'
  }
}

因此，下面的查询将不起作用：

const READ_TODO = gql`
  query getTodos {
    Home @client {
      todos {
        id
      }
    }
  }
`;

是否可以用InMemoryCache处理这种情况？或者我应该为此使用其他解决方案？

谢谢！

在阿波罗中管理嵌套状态

0 个答案: