안녕하세요 graphgl + recoil로 사이드 프로젝트를 해보고 있는 중에 구글링을 해 봐도 사례가 많이 없어서 여기에 질문을 올리게 되었습니다. Graphql로 짜여진 API를 apollo-client로 받아서 작업을 해 주려고 합니다. 예를 들면 getAllSpots 라는 API에 대한 코드는 다음과 같이 작성을 하였습니다.

// /lib/apollo/queries/getAllSpots.ts

import { gql } from '@apollo/client';
import client from '~/lib/apollo/client';

const GET_ALL_SPOTS = gql`
  {
    getAllSpots {
      id
      // ...
      y
    }
  }
`;

const getAllSpots = async (): Promise<GQL.GetAllSpots.Data> => {
  const response = await client.query({
    fetchPolicy: 'cache-first',
    query: GET_ALL_SPOTS,
  });
  return response?.data?.getAllSpots;
};

export default getAllSpots;

그리고 상태는 recoil로 관리를 해 주려고 해서 상태를 관리하는 state 파일을 하나 다음과 같이 만들어서 spotList를 상태로 관리를 하고 첫 렌더링 시에 getAllSpots로 서버에서 데이터를 받아오는 작업을 하려고 합니다.

import { atom, selector, selectorFamily } from 'recoil';
import getAllSpots from '~/lib/apollo/queries/getAllSpots';

const spotsList: GQL.GetAllSpots.Data[] = [];

const query = selectorFamily({
  key: 'query',
  get: (first: boolean) => async () => {
    try {
      const res = await getAllSpots;
      return res;
    } catch (err) {
      // TODO - ERROR
    }
    return null;
  },
});

export const spotListQuery = selector({
  key: 'spotListQuery',
  get: ({ get }) => async () => {
    const list = get(query(get(true)));
    return list;
  },
});

const spotListState = atom({
  key: 'spotListState',
  default: spotsList,
});

여기에서 궁금한 점은 1. state를 관리하는 위의 파일에서 graphql 쿼리를 어떻게 불러와야 하는지 이고 그 작업이 되고 나서 2. 해당 데이터가 필요한 컴포넌트에서 첫 렌더링 시에 graphql API 를 어떻게 trigger 해야 하는지 (위의 제 프로젝트에서는 getAllSpots를 첫 렌더링 시에 useEffect와 같은 훅으로 데이터를 불러와야 하는데 어떻게 그 작업을 trigger 해야 하는지) 가 궁금합니다… 제가 설명을 좀 충분하게 해드리지 못 했다면 스레드로 질문 주시면 추가적으로 설명 드리도록 하겠습니다! 감사합니다 ㅠㅠ

Apollo Client와 Recoil은 역할과 동작이 겹치는 부분이 매우 많기 때문에 더더욱 라이브러리간에 바운더리를 잘 정해서 사용하시거나 한쪽으로 통일해주는게 좋을 것 같은데요. 혹시 달성하고자 하시는 패턴같은게 어느정도 그려져 있나요?