[Apollo/GraphQL] makeVar로 상태 전역 관리하기

makeVar()

Apollo Client3에서 부터 본격적으로 makeVar()를 통해 상태관리를 전역적으로 할 수 있게해줍니다.

캐시와 분리되어 있기 때문에 모든 유형 및 데이터 구조를 저장할 수 있습니다.

import {InMemoryCache, makeVar} from '@apollo/client';

...

export const isTwoFactoryVar = makeVar<{type: 'CHECK' | 'CREATE' | 'CHANGE'; open: boolean}>({type: 'CHECK', open: false});

...

export const cache = new InMemoryCache({
    typePolicies: {
        Query: {
            fields: {
                ...
                isTwoFactory,
                ...
            }
        }
    }
})

사용하기

import {isTwoFactoryVar} from 'Apollo/cache';

...

const handleSubmit = () => {
    isTwoFactoryVar({type:'CHECK', open:true});
}

사용은 그냥 임포트 시켜서 호출해 사용하면 된다.

반응 변수는 반응 변경을 트리거 할 수 있고 값을 수정할 때마다 해당 변수에 의존하는 쿼리가 새로 고쳐진다.

이에 따라 어플리케이션의 UI가 업데이트됩니다.