# Does relayStylePagination support nested connections?

**URL:** <https://community.apollographql.com/t/does-relaystylepagination-support-nested-connections/5596>\
**Category:** Client SDKs\
**Tags:** client, web\
**Created:** [January 29, 2023, 6:44am UTC](https://community.apollographql.com/t/does-relaystylepagination-support-nested-connections/5596 "2023-01-29T06:44:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mondo\_Duke](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/mondo_duke/32/3781_2.png) [@Mondo\_Duke](https://community.apollographql.com/u/Mondo_Duke)\
**Post date:** [January 29, 2023, 6:44am UTC](https://community.apollographql.com/t/does-relaystylepagination-support-nested-connections/5596/1 "2023-01-29T06:44:30Z")

</div>

Does nested pagination with [relayStylePagination](https://www.apollographql.com/docs/react/pagination/cursor-based/#relay-style-cursor-pagination) work?

For instance, my website is loads comments (paginated), and then replies on each comment (also paginated).  
Can I use the native relayStylePagination here?  
Or would I need to modify it?

---

<div class="post-metadata">

**Author:** ![watson](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/watson/32/2053_2.png) [@watson](https://community.apollographql.com/u/watson)\
**Post date:** [February 1, 2023, 6:57pm UTC](https://community.apollographql.com/t/does-relaystylepagination-support-nested-connections/5596/2 "2023-02-01T18:57:44Z")

</div>

What version of `@apollo/client` are you using? There was a regression reported that some community members mentioned nested pagination not working, but working after the fix in `@apollo/client@3.4.7`

> <https://github.com/apollographql/apollo-client/issues/8600>
>
> \*\*Intended outcome:\*\*
> The 3.4.\* versions introduce a regression on the \`merge\` …policy
> 
> \*\*Actual outcome:\*\*
> The merge custom policy should receive correct parameters
> 
> \*\*How to reproduce the issue:\*\*
> 
> Here a unit test:
> \`\`\`typescript
> import { gql, InMemoryCache, useQuery } from '@apollo/client'
> import { MockedProvider } from '@apollo/client/testing'
> import { render, screen, waitFor } from '@testing-library/react'
> import faker from 'faker'
> 
> const cache = new InMemoryCache({
> typePolicies: {
> Country: {
> fields: {
> cities: {
> keyArgs: \['size'\],
> merge(existing, incoming, { args }) {
> console.log(existing, incoming, { args })
> if (!args) return incoming
> 
> const items = existing ? existing.slice(0) : \[\]
> 
> const offset = args.offset ?? 0
> for (let i = 0; i \< incoming.length; ++i) {
> items\[offset + i\] = incoming\[i\]
> }
> 
> return items
> },
> },
> },
> },
> CityInfo: {
> merge: true,
> },
> },
> })
> 
> const GET\_COUNTRIES = gql\`
> query GetCountries {
> countries {
> id
> ...WithSmallCities
> ...WithAirQuality
> }
> }
> 
> fragment WithSmallCities on Country {
> biggestCity {
> id
> }
> smallCities: cities(size: SMALL) {
> id
> }
> }
> 
> fragment WithAirQuality on Country {
> biggestCity {
> id
> info {
> airQuality
> }
> }
> }
> \`
> 
> function Test() {
> const { data } = useQuery(GET\_COUNTRIES)
> return \<div data-testid="countryNumber"\>{data?.countries.length}\</div\>
> }
> 
> it('should render without error', async () =\> {
> const countries = \[
> {
> \_\_typename: 'Country',
> id: faker.datatype.uuid(),
> biggestCity: {
> \_\_typename: 'City',
> id: faker.datatype.uuid(),
> info: {
> \_\_typename: 'CityInfo',
> airQuality: faker.datatype.number(),
> },
> },
> smallCities: \[
> {
> \_\_typename: 'City',
> id: faker.datatype.uuid(),
> },
> \],
> },
> \]
> 
> const mock = { request: { query: GET\_COUNTRIES }, result: { data: { countries } } }
> 
> render(
> \<MockedProvider cache={cache} mocks={\[mock\]} resolvers={{}}\>
> \<Test /\>
> \</MockedProvider\>,
> )
> 
> await waitFor(() =\> {
> const element = screen.getByTestId('countryNumber')
> expect(element).toHaveTextContent(countries.length.toString())
> })
> })
> \`\`\`
> 
> If you try to run this test, you will have this error \`Uncaught \[TypeError: existing.slice is not a function\]\`, since we receive these arguments into the merge function:
> \`{ \_\_ref: 'City:a44cfd2e-c50f-4fcf-924d-d8e275c8df07' }\` as existing
> \`{
> id: 'a44cfd2e-c50f-4fcf-924d-d8e275c8df07',
> \_\_typename: 'City',
> info: {
> \_\_typename: 'CityInfo',
> airQuality: 20807
> }
> }\` as incoming
> 
> We should have:
> \`undefined\` as existing
> \`{ \_\_ref: 'City:a44cfd2e-c50f-4fcf-924d-d8e275c8df07' }\` as incoming
> 
> FYI If we delete \`CityInfo: { merge: true }\` from the cache configuration, it works.
> 
> \*\*Versions\*\*
> It works with 3.3.21 but not with the new 3.4.\* versions