Apollo 本地查询不适用于变量答案

【问题标题】：Apollo local query not working with variableApollo 本地查询不适用于变量
【发布时间】：2020-03-23 10:28:08
【问题描述】：

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

这是我的设置：

默认状态

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' 的项目。

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

【问题讨论】：

标签： javascript graphql apollo

【解决方案1】：

您应该查询单个Item，例如

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

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

请注意 id 和 __typename 用作缓存中的键 - 而不是任何名为 itemId 的自定义。阅读this

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

【讨论】：