How to combine fetchMore with offsetLimitPagination and filtering with Apollo Client and Graphql

Help
,
1

I have the following GraphQL query provides from the server:

const MY_CONTENT = gql`
  query GetContent(
    $channel: String
    $day: Int
    $limit: Int
    $offset: Int
  ) {
    getMyContent(
      color: $color
      day: $day
      limit: $limit
      offset: $offset
    ) {
      pagination {
        hasNext
      }
      nodes {
        uuid
        title
      }
    }
  }
`;

export default My_CONTENT;

In the frontend I can filter the nodes by color and day offset.

I try to implement infinite scroll (fetch more items) with Apollo Client fetchMore function.

In the React component I have my fetch next function:

const fetchNext = useCallback(
    () =>
      fetchMore({
        variables: {
          offset: data?.myContent.nodes.length,
        },
      }),
    [data]
  );

I configured the cache and typePolicies like:

typePolicies: {
   Missed: {
      fields: {
        nodes: offsetLimitPagination(),
      },
    },
  },

But now the results are not merged correctly in the frontend? It puts everything together and also doesn’t filter correctly anymore.

What I am doing wrong here?