Apollo Client에서 여러 화면 데이터를 반복적으로 휴대하는 방법(Next.js/React)

Apollo Client에서 여러 화면 데이터를 반복적으로 휴대하는 방법(Next.js/React)

크로스 화면 데이터를 다루는 여러 방법 가운데 이번에는 아폴로 기능을 활용해 레드ux 등을 사용하지 않은 채 같은 상황을 구현할 때의 방법을 미리 적어두기로 했다.

컨디션

React v17

Next.js v10

Apollo Client v3

방법

먼저makeVar 함수를 사용하여 캐시용 상자를 미리 준비합니다

https://www.apollographql.com/docs/react/local-state/reactive-variables/#creating

// /lib/cache.ts
export const catCache: Partial<Record<
  'uuid' | 'name' | 'abbreviation' | 'country', string,
>>[] = makeVar([]);

이것은 단지 하나의 상자이기 때문에 안에 어떤 데이터가 들어 있는지 명확하게 정의할 수 있기를 바랍니다.

이어서 그 캐시에서 데이터를 얻는 처리를 쓴다

hooks를 사용하면 Reactive에서 값을 얻을 수 있습니다.
https://www.apollographql.com/docs/react/local-state/managing-state-with-field-policies/#storing

// /pages/index.tsx
const Index = () => {
  const cats = useReactiveVar(catCache);
  return (
    {cats?.map((cat) => {
      return(
      <div key={cat.uuid}>
        <h1>{cat.name}({cat.abbreviation})</h1>
	<p>{cat.country}</p>
      </div>)
    })}
  );
};
export default Index;

다른 페이지에서 데이터 추가

이것은makeVar의 기능으로 데이터를 추가할 수 있으며, 인덱스 페이지로 이동할 때 ReactiveVar에서 데이터를 얻고, 페이지를 뛰어넘어 데이터를 휴대할 수 있다.

// /pages/add-cat.tsx
const AddCat = () => {
  const handleClick = () => {
    catCache([...catCache(), {
      uuid: 'B10F6410-973D-47E6-A098-28EFB4F17388',
      name: 'American Shorthair',
      abbreviation: 'AmeShor',
      country: 'Europe',
    }]);
  };
  return (
    <button type="button" onClick={handleClick}>Add Cat</button>
  );
};
export default AddCat;

코드 자체가 비어 있어 미묘할 수도 있지만 이런 형식으로 실현할 수 있다.