Question

背景：我正在使用react-native构建移动应用，并正在设置AWS的AppSync以将应用与云数据源同步。

挑战：我有一个视图，该视图显示了列表中的所有项目。列表的ID作为属性传递给组件。我需要使用该列表ID来查询该列表的项目。如果我对列表ID进行硬编码，我的查询就可以正常工作，但是我很难确定道具更新时如何为查询动态设置列表ID。

这是我在 ListPage 组件中使用的工作（具有testList01的硬编码ID）：

const getListItems = id => gql`
    query getListItems {
      getListItems(listID: ${id}) {
        reference_id,
        quantity,
      }
    }
  `;

export default graphql(getListItems('testList01'), { 
  options: {
    fetchPolicy: 'cache-and-network',
  },
  props: props => ({
    listItems: props.data ? props.data.getListItems : [],
    data: props.data,
  }),
})(withNavigationFocus(ListPage));

我希望能够根据从道具传递过来的列表ID动态设置要查找项目的列表。具体来说，我正在使用react-navigation进入ListPage，该视图供用户查看List上的项目。因此，这是当用户单击列表名称并路由到ListPage组件时执行的代码：

  handleListSelection(list: Object) {
    const { navigation, userLists } = this.props;
    navigation.navigate('ListPage', {
      listID: list.record_id,
      listName: list.list_name,
      userLists,
    });
  }

从我先前的（AppSync / GraphQL之前的）实现中，我知道我可以通过this.props.navigation.state.params.listID访问ListPage中的列表ID。我希望能够在我的AppSync查询中使用该查询，但是由于该查询是在组件外部创建的，因此我无法访问道具，因此难以获取ID。

Answer 1

我使用名为here的称为react-apollo-dynamic-query的软件包来完成了这项工作。该软件包的作者还直接链接到simple function，以执行我在此处尝试做的事情。本质上，它只是以一种简单的方式包装了常规的graphql调用，从而公开了这些道具，以便可以将它们传递给查询。

我的代码现在看起来像这样（我在同一文件的ListPage组件定义下方）：

const getListItems = props => {
   const listID = props.navigation.state.params.listID;
   return gql`
      query getListItems {
        getListItems(listID: "${listID}") { // Note the variable being wrapped in double quotes
          reference_id,
          quantity,
         }
       }
   `;
};

const config = {
  options: {
    fetchPolicy: 'cache-and-network',
  },
  props: props => ({
    listItems: props.data ? props.data.getListItems : [],
  }),
};

const MyApolloComponent = graphqlDynamic(getListItems, config)(ListPage);

export default MyApolloComponent;

Answer 2

它应该像这样工作：

const getListItems = (id) => {
  return gql`
    query getListItems {
      getListItems(listID: ${id}) {
        reference_id,
        quantity,
      }
    }
  `;
}

像下面这样叫这个getListItems

export default graphql(getListItems(id), { //from where ever you want to send the id
  options: {
    fetchPolicy: '
    ......

我尚未测试此代码。如果可以，请更新。尽管我很确定它可以工作。

希望这会有所帮助。快乐编码：）

如何使用AWS AppSync SDK for React-Native动态设置查询参数

2 个答案: