javascript - Apollo 本地查询不适用于变量

Question

我正在使用 React Apollo 来管理我的应用程序中的本地状态，并尝试运行我的状态查询，但根据他们的文档传递一个变量

这是我的设置：

默认状态

const defaults {
  myItems: [
    {
      __typename: 'Item',
      itemId: '1'
    },
    {
      __typename: 'Item',
      itemId: '2'
    }
  ]
}

我的组件

import React, { PureComponent } from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';

const LOCAL_ITEMS_QUERY = gql`
  query LOCAL_ITEMS_QUERY($itemId: String){
    myItems(itemId: $itemId) @client {
      __typename
      itemId
    }
  }
`;

class MyComponent extends PureComponent {
  render() {

    return (
      <div>
        <Query query={LOCAL_ITEMS_QUERY} variables={{ itemId: '1' }}>
          {myItems=> {
            console.log(myItems)
            return <div />
          }}
        </Query>
      </div>
    );
  }
}

export default MyComponent;

组件中的上述查询MyComponent返回包含两个项目的数组，而不仅仅是 itemId 为 的项目'1'。

我在这里哪里出错了？似乎可以使用变量查询本地状态，但不确定为什么它对我不起作用

标签： javascriptgraphqlapollo

Answer 1

您应该查询 single Item，例如

const LOCAL_ITEM_QUERY = gql`
  query LOCAL_ITEM_QUERY($itemId: String){
    Item(id: $itemId) @client {
      __typename
      id
    }
  }
`;

...但这取决于类型定义。

请注意，idand__typename用作缓存中的键 - 而不是任何自定义命名itemId的 . 读这个

此处记录了本地状态（带有@client）数据- 通过 id 或其他字段访问可能需要本地解析器。