# Cannot get relay-style paging to work with cache-first

**URL:** <https://community.apollographql.com/t/cannot-get-relay-style-paging-to-work-with-cache-first/707>\
**Category:** Client SDKs\
**Tags:** client, web\
**Created:** [July 8, 2021, 7:11am UTC](https://community.apollographql.com/t/cannot-get-relay-style-paging-to-work-with-cache-first/707 "2021-07-08T07:11:46Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![thomastvedt](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/thomastvedt/32/124_2.png) [@thomastvedt](https://community.apollographql.com/u/thomastvedt)\
**Post date:** [July 8, 2021, 7:11am UTC](https://community.apollographql.com/t/cannot-get-relay-style-paging-to-work-with-cache-first/707/1 "2021-07-08T07:11:47Z")

</div>

Hi, why does my example below work fine with fetchPolicy “network-only”, but not with “cache-first”?

I’m using “relay” style cursor based paging. pageSize = 50, and I got 64 items in total. Here is my field policy:

```js
const typePolicies: TypedTypePolicies = {
  // eslint-disable-next-line @typescript-eslint/naming-convention
  Query: {
    fields: {
      allRetailers: customRelayStylePagination(['filter'])
    }
  }
}

```

customRelayStylePagination is just copy-paste from relayStylePagination to debug.

Here is my function to retrieve ALL retailers:

```js
const getAllRetailers = async (showInactiveRetailers: boolean, showInactiveMachines: boolean): Promise<Array<RetailerListItemFragment>> => {
  let myCursor = undefined;
  let hasNextPage = true;
  let result: Array<RetailerListItemFragment> = [];

  const filter = showInactiveRetailers
    ? undefined
    : {
      machineFilter: showInactiveMachines
        ? RetailerMachineFilter.HasActiveOrInactiveMachines
        : RetailerMachineFilter.HasActiveMachines,
    };

  try {
    console.log('start');
    while(hasNextPage) {
      const res: ApolloQueryResult<GetRetailerListQuery> = await apolloClient.query<
        GetRetailerListQuery,
        GetRetailerListQueryVariables
        >({
        variables: {
          cursor: myCursor,
          filter
        },
        query: GET_RETAILER_LIST,
        fetchPolicy: 'cache-first'
      });
      myCursor = res.data.allRetailers?.pageInfo.endCursor;
      hasNextPage = res.data.allRetailers?.pageInfo.hasNextPage || false;
      console.log('hasNext: ' + hasNextPage);
      result = res.data.allRetailers?.edges?.map(c => c.node) || [];
    }
    console.log('done', result);
    return result;

  } catch(err) {
    console.error(err);
    throw err;
  }
}

```

As mentioned this works fine for “network”, but not when using “cache-first”. I get stuck in a infinite loop where hasNextPage is always true. The first GraphQL request returns 50 items. But then it looks like it doesn’t fire the second GraphQL request when using “cache-first”. Why is that? Doesn’t it understand that I have more pages on the server?

I’m pretty sure I’m doing something wrong, but I dont know what :p:wink:

In this screenshot you can see the result from the read() function. The one on the top is when using “network”. When using “cache-first”, I see two read() where pageInfo is the same as in the bottom one.

 ![Screen Shot 2021-07-08 at 08.54.30](https://us1.discourse-cdn.com/flex019/uploads/apollographql/original/1X/69a6af2b8bec3d5b43f171c2d1f21887071391be.png)

---

<div class="post-metadata">

**Author:** ![thomastvedt](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/thomastvedt/32/124_2.png) [@thomastvedt](https://community.apollographql.com/u/thomastvedt)\
**Post date:** [July 9, 2021, 8:22am UTC](https://community.apollographql.com/t/cannot-get-relay-style-paging-to-work-with-cache-first/707/2 "2021-07-09T08:22:17Z")

</div>

Another question:  
`useQuery()` vs `client.Query()`. What is the difference here? What is “extra” in the hook?

And does apollo handle race conditions, cancelling previous queries? If yes, both in hook and client.query?

---

<div class="post-metadata">

**Author:** ![nyg](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/nyg/32/1673_2.png) [@nyg](https://community.apollographql.com/u/nyg)\
**Post date:** [February 29, 2024, 10:56pm UTC](https://community.apollographql.com/t/cannot-get-relay-style-paging-to-work-with-cache-first/707/3 "2024-02-29T22:56:15Z")

</div>

As this question the first Google result when searching for “relayStylePagination cache-first”, I will just repost my answer to [your StackOverflow question](https://stackoverflow.com/questions/68299933/apollo-graphql-relay-style-cursor-pagination-doesnt-work-with-cache-first-fetch):

I think what happens is the following:

- The [`cache-first`](https://www.apollographql.com/docs/react/data/queries/#cache-first) fetch policy means that Apollo will first look into its cache before making a query to the GraphQL server. If it _considers_ that all elements are present in the cache, then it will not make a request to the server.
- When using `relayStylePagination()`, [`keyArgs`](https://www.apollographql.com/docs/react/pagination/key-args#using-no-arguments) is set to false. In your code, you set it to filter, but it’s all the same to Apollo: in both case it will ignore the fact that your cursor variable is different. For this reason, it will consider that all elements are present in the cache and doesn’t need to make a request to the server.

I’ve lost a few hours on this and my understanding is that `relayStylePagination()` simply cannot work with cache-first fetch policy\*.

(\*) I would definitly welcome a confirmation or refutation of this claim :).