Paginating over subfield

Summary

Hi, I’m coming from Relay where it’s super easy to paginate over subfields. However, I’m not managing to achieve this with apollo, can somebody please give me a heads up?

Problem

When the component loads, the query works fine, then when fetchMore is called, all data from the paginating field vanish. In the example below, bar would have results on initial load, then after fetchMore it becomes []. What I’m doing wrong?

Code

query

export const MY_QUERY = gql`
  query foo($pk: uuid!, $offset: Int = 0) {
    foo_by_pk(pk: $pk) {
      bar(limit: 20, offset: $offset) @connection(key: "foo_bar") {
        ...bar_data
      }
    }
  }
  ${Bar_Fragment.data}
`

field policy

const client = new ApolloClient({
  uri: URL,
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          bar: offsetLimitPagination(),
        },
      },
    },
  }),
})

fetch more

const onEndReached = () => {
  fetchMore({
    variables: {
      offset: data.foo.bar.length,
    },
  })
}

[benjamn]

Great to hear! Since that was the problem, I believe offsetLimitPagination can be improved so that it defaults args.offset to zero. I’ll fix that shortly.

[PedroBern]

@benjamn thanks it did help! But a new issue came up with your solution:

I have 2 screens:

Screen 1

Simple feed pagination that was working before the solution:

  query FooFeed($offset: Int = 0) {
    foo(limit: 20, offset: $offset,){
      ...FooItem_data
      bar(limit: 1) {
        ...BarItem_data
      }
    }
  }

Screen 2

Details screens that paginate over bar for a given foo. Now this one is working as expected thanks to you. Before your solution, I was needing to query bar with a where constraint.

  query FooDetail($pk: uuid!, $offset: Int = 0) {
    foo_by_pk(pk: $pk) {
      bar(limit: 20, offset: $offset) {
        ...BarItem_data
      }
    }
  }

Type Policies

export const cache: InMemoryCache = new InMemoryCache({
  typePolicies: {
    foo: {
      fields: {
        bar: offsetLimitPagination(), // used in Screen 2 -> Details
      },
    },
    Query: {
      fields: {
        foo: offsetLimitPagination(), // used in Screen 1 -> Feed
      },
    },
  },
})

Question

@benjamn before your solution, the Screen 1 was working and Screen 2 broken. Now it’s the opposite. The bar field of Screen 1 is always empty. What am I doing wrong here? Thanks for the help