1. fragment 꼭 사용해보라고 추천해주셔서 알아보고 있는데 fragment-matc...
# 질문
w
2. fragment 꼭 사용해보라고 추천해주셔서 알아보고 있는데 fragment-matcher preset 말씀하신걸까요? 관련 아티클 이거저거 읽어보고 있는데 딱 이해되지는 않아서 어렵네요.. 대강 지혁님께서 여러 발표에서 말씀하신 것 처럼 fragment 이용해서 데이터 의존성 드러내는 용도로 사용하라고 추천해주신거 같고, 아래 예제 코드 처럼 사용하면 쿼리 중에 fragment 사용한 쿼리가 있을 경우 possibleTypes에 해당 정보를 전달해주는거 같은데... 제가 이해한 의도가 fragment-matcher와 어떻게 연결되는지 잘 모르겠네요 ㅠㅠㅠㅠ
Copy code
import { InMemoryCache } from '@apollo/client';

// generated by Fragment Matcher plugin
import introspectionResult from '../fragment-matcher';

const cache = new InMemoryCache({
  possibleTypes: introspectionResult.possibleTypes,
});
h
아폴로 쓰시나요? fragment matcher 는 apollo client v3 에서는 안쓰이는걸로 알고잇어요!
w
네! 아폴로 v3 사용하고 있습니다. 그런데 해당 preset readme 보니까 apollo 3 버전에서의 사용 예제를 다루고 있는데 혹시 이 fragment-matcher 말씀하신게 맞으실까요? https://www.graphql-code-generator.com/plugins/fragment-matcher#usage-with-apollo-client-3
h
네네 문서에 나와있듯
v2 에서 쓰던거고
t
Copy code
# RootComponent.tsx
import { FragmentSomethingWow } from './Something'

const RootComponent = () => {
  useQuery(graphql`
    query ... {
      ...Something_wow

      ${FragmentSomethingWow}
    }
  `)
}

# Something.tsx
import { Something_wow } from './__generated__/Something_wow.graphql'

export const FragmentSomethingWow = graphql`
  fragment Something_wow on Query {
    ...
  }
`

interface SomethingProps {
  wow: Something_wow
}
const Something = (props) => {
  return (
    <div>
      {props.wow...}
    </div>
  )  
}
이런식으로 못하려나요 ㅎㅎ Apollo를 안쓴지 너무 오래되서요 ㅠ
h
아 graphql-codegen fragment matcher plugin 이 스스로 possibleTypes 뽑는 기능까지 포함했나보군요
근데 실제로 필요한 내용은 이런 캐시 설정이에요
Apollo v2 에는 FragmentMatcher 라는 기능이 있어서 클라이언트에 알렸고 Apollo v3 에서는 Possible Types config 으로 대체되었는데
이전에 graphql-codegen 에서 쓰던 fragment matcher 생성하는 플러그인이 possible types 생성 기능까지 제공하나보네요
지혁님이 언급한 "Fragment 꼭 쓰세요" 랑 fragment matcher 는 다른데
Possible Types (구 Fragment Matcher) 는 Apollo Client 에서 Fragment 썼을 때 캐시가 정상동작하기 위해 필요한 설정파일 쯤으로 생각하시면 됩니다
원래는 사용할 타입들에 대해 일일히 설정해줘야하는걸
코드젠으로 자동으로 뽑는거죠
🙇‍♂️ 1