Relay: [compat] bug when doing pagination using RefetchContainer

Created on 17 Jul 2017  路  6Comments  路  Source: facebook/relay

createRefetchContainer(
  List,
  {
    viewer: graphql.experimental`
      fragment List_viewer on Viewer
      @argumentDefinitions(
        count: { type: "Int", defaultValue: 10 }
        cursor: { type: "String" }
      ) {
        myList(
          first: $count
          after: $cursor
        ) {
          totalCount
          pageInfo {
            hasNextPage
            startCursor
            endCursor
          }
          edges {
            cursor
            node {
              id
              _id
              name
            }
          }
        }
      }
    `,
  },
  graphql.experimental`
    query ListRefetchQuery($count: Int, $cursor: String) {
      viewer {
        ...List_viewer @arguments(count: $count, cursor: $cursor)
      }
    }
  `,
),
onEndReached = () => {
  const { list } = this.props.viewer;

  if (!list.pageInfo.hasNextPage) return;

  const { endCursor } = list.pageInfo;

  const total = list.edges.length + 10;
  const refetchVariables = {
    count: 10,
    cursor: endCursor,
  };
  const renderVariables = {
    count: total,
    cursor: endCursor,
  };

  this.props.relay.refetch(
    refetchVariables,
    renderVariables,
    (error) => {
      console.log('onEndReached: ', error);
    },
    {
      force: false,
    });
};

when I do this I got the following error:

GraphQLRange currently only handles first(<count>), ' +
          'after(<cursor>).first(<count>), last(<count>), ' +
          'before(<cursor>).last(<count>), before(<cursor>).first(<count>), ' +
          'and after(<cursor>).last(<count>)

I think the error is from this file: https://github.com/facebook/relay/blob/785b7d6ea25db4febb975fb6224d6553d1d9120e/packages/react-relay/classic/legacy/store/GraphQLRange.js#L276

Most helpful comment

do you have the QueryRenderer part as well?

All 6 comments

const refetchVariables = (fragmentVariables) = ({
    ...fragmentVariables,
    count: 10,
    cursor: endCursor,
  });
const renderVariables = {
    count: total,
}

works fine

@sibelius did happen to you that the list doesn't get updated in the client while the query reaches the server without any error?

note: if i do
props.relay.refetch(refetchVariables);
instead of
props.relay.refetch(refetchVariables, renderVariables);
i can see the new page being render while replacing the previous one, which confirms that the query is correct.

My list is updating fine now

@sibelius can you share your code?

the code is above

do you have the QueryRenderer part as well?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

scotmatson picture scotmatson  路  3Comments

amccloud picture amccloud  路  3Comments

luongthanhlam picture luongthanhlam  路  3Comments

piotrblasiak picture piotrblasiak  路  3Comments

rayronvictor picture rayronvictor  路  3Comments