Question

我有一个数组/表，可以说10000项。

现在我尝试在我的react relay客户端中显示索引4000到4010的项目。

但目前connectionArgs仅允许使用cursors进行导航，但我不想在我到达第4000项之前进行翻页。

如何使用GraphQL查询导航到给定的偏移量？

谢谢

Answer 1

您可以使用this.props.relay.setVariable通过声明Relay.Container片段和服务器GraphQL架构中的变量将变量值传递给服务器端。

示例代码如下。请特别注意标有注意：

的部分

在您的客户端：

// Your React component 
class ItemList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { startItemIndex: 0 };
  }

  nextPage() {
    const _nextPageItemIndex = this.state.startItemIndex + itemCountOnPage;
    // NOTE: Call this.props.relay.setVariables to force re-fetch 
    this.props.relay.setVariables({ startItemIndex: _nextPageItemIndex });
    this.setState({ startItemIndex: _nextPageItemIndex });
  }
  ...
}

// Your Relay data declaration
Relay.createContainer(ItemList, {
  initialVariables: {
    itemStartIndex:  0,
  },
  fragments: {
    itemList: () => Relay.QL`
      // NOTE: Declare your variable in the GraphQL fragment
      fragment on ItemList(itemStartIndex: $itemStartIndex) {
        id,
        listName,
        items,
        ...
      }
    `
  }
}

在服务器端，在GraphQL架构中：

var ItemListType = new GraphQLObjectType({
  name: 'ItemList',
  fields: () => ({
    listName: {type: GraphQLString},
    items: ...
  }),
});

// App is what your Route will query, and it holds your itemList
// Relay.QL`
//   query GameQuery {
//     itemList
//   }
// `
var AppType = new GraphQLObjectType({
  name: 'App',
  fields: () => ({
    itemList: {
      // NOTE: This is where your variables will appear
      args: {
        itemStartIndex: {type: GraphQLInt},
      },
      type: new GraphQLList(ItemListType),
      ...
      resolve: (appObj, args) => {
        // NOTE: Use args.itemStartIndex to pull out your list
      }
    },
  }),
})

有关教程参考：https://facebook.github.io/relay/docs/guides-containers.html#content
有关工作代码参考（请参阅“简单参数化（高分数示例）”）：https://facebook.github.io/relay/

如何在连接中没有游标的情况下导航

1 个答案: