Как перемещаться без курсоров в соединении

У меня есть массив/таблица, скажем, 10000 элементов.

Теперь я пытаюсь показать элементы с индекса 4000 по 4010 в моем релейном клиенте.

Но на данный момент connectionArgs разрешает навигацию только с cursors, но я НЕ хочу переходить на страницу, пока не доберусь до элемента 4000.

Как перейти к заданному смещению с помощью запроса GraphQL?

Спасибо


reactjs graphql-js relayjs
person Christine    schedule 10.12.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать 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
      }
    },
  }),
})
person nethsix    schedule 27.03.2016