리스트 Infinite scroll 구현

• 백엔드에 쿼리를 요청하는 파일에서 페이지를 나타내는 state와 fetchmore, onEndReached, onEndReachedThreshold를 작성한다.
• 페이지를 나타내는 state는 onEndReached에 따라 화면의 위치가 맨 끝일 때마다 증가한다.(onEndReachedThreshold를 통해 인식되는 화면의 끝 위치를 변경할 수 있다.) 이에 따라 쿼리의 매개 값만 바뀌고 추가적인 쿼리 요청을 보내게 되는데, 기본적인 아폴로 클라이언트의 설정은 이 요청하는 쿼리를 서로 다른 것이라고 인식하기 때문에 아래와 같이 설정해준다.

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          seeMyShopListMobile: {
            keyArgs: false,
            merge(existing = [], incoming = []) {
              return [...existing, ...incoming];
            },
          },
        },
      },
    },
  }),
});

쿼리를 같은 것이라 인식하고 난 뒤에 정상적으로 리스트를 요청하지만, 기존에 있던 리스트를 덮어쓰는 것을 확인할 수 있다.
따라서 위와 같이 merge를 작성하여 기존의 리스트와 병합해준다.