Next.js 에서 Relay 사용해보려고 하는데 혹시 SSR 처리 관련해서 디깅해보신 분...
# 질문u
이찬희
03/22/2022, 5:22 AMNext.js 에서 Relay 사용해보려고 하는데 혹시 SSR 처리 관련해서 디깅해보신 분 계신가요?
usePreloadedQuery 를 getStaticProps/getServerSideProps 를 통해 사용하려고 하는데, JSON 시리얼라이즈 이슈, environment 불일치 관련해서 잘 안맞네요.. (지끈)
이찬희
03/22/2022, 5:24 AM지금은 아래 라이브러리 사용해서 비교적 간단하게 처리는 했는데, getInitialProps 로 구현되어서 아쉽습니다. 궁극적으로 달성하고 싶은건 getStaticProps/Path 사용하려고 합니다.
https://github.com/RevereCRE/relay-nextjs
이찬희
03/22/2022, 5:26 AM지금 머릿속으로 떠오르는 다른 접근은:
• 페이지(e.g: /pages/index.tsx) 내에서 useFragment 사용
• 페이지 내에서 사용한 프래그먼트를 사용하는 Query 작성
• 해당 쿼리를 loadQuery 로 불러오고 (store-or-network) RelayEnvironmentProvider 로 환경과 함께 전달
이러한데 혹시 잘못 짚은 부분이 있을까요?
이찬희
03/22/2022, 5:29 AM페이지(e.g: /pages/index.tsx) 내에서 useFragment 사용아 여기서 사용할 query ref 가 없군요 으윽
이찬희
03/22/2022, 5:30 AM혹시 지금 상황에서도 relay-tools/relay-hooks 를 선택해서 사용해도 괜찮은가요..?
h
Hyeseong Kim
03/22/2022, 5:54 AM그니까
Hyeseong Kim
03/22/2022, 5:54 AMGatsby 를 만들고 싶으시다는거죠? ㅋㅋㅋㅋㅋ
zzzz 3
u
이찬희
03/22/2022, 5:56 AM!
이찬희
03/22/2022, 5:56 AMㅋㅋㅋㅋㅋㅋㅋ
이찬희
03/22/2022, 5:57 AM아 이게 그런 문제로 이어지는군요
이찬희
03/22/2022, 5:57 AM갑자기 머리 한대 맞은거같네요
h
Hyeseong Kim
03/22/2022, 5:58 AM전 Gatsby 쓰고 있어서 그걸 날로먹고 있는데
Hyeseong Kim
03/22/2022, 5:58 AM직접 만들려면 삽질이 너무 거대할듯
t
Tony Won
03/22/2022, 6:40 AM
저희는 제가 만든 사내 라이브러리 쓰는데 ㅋㅋㅋ
Tony Won
03/22/2022, 6:40 AM
크크크크크
Tony Won
03/22/2022, 6:41 AM
오늘 공개해야겠네요. 이미 정리가 되어있어서 NPM에 올리기만 하면 돼요
👍 1
u
이찬희
03/22/2022, 6:41 AM와우
이찬희
03/22/2022, 6:42 AM공개해주시면 마포에서 당근쪽으로 한번 절 올리겠습니다
👍 2
t
Tony Won
03/22/2022, 6:42 AM
아직 개발중인데...
https://www.daangn.com/kr/job-posts/%EC%B0%AC%EC%82%AC%EB%9E%91-%ED%99%80%EC%84%9C%E[…]%99%EC%95%8C%EB%B0%94%EA%B5%AC%ED%95%B4%EC%9A%94-Lm7BKZcFuWW/
요거가 Next.js getStaticProps + Relay에요
👍 2
Tony Won
03/22/2022, 6:43 AM
근데 혜성님 말씀처럼 Gatsby를 한땀한땀 구현하고 있는 느낌을 지울수가 없습니다
i
irrationnelle
03/22/2022, 6:48 AMh
Hyeseong Kim
03/22/2022, 7:01 AM아뇨
Hyeseong Kim
03/22/2022, 7:01 AM정확히는 gatsby query compiler 가 초기버전이 Relay compiler 의 fork 였는데요
Hyeseong Kim
03/22/2022, 7:02 AM독립해서 자체 구현체가 된지는 꽤 오랜시간이 지났습니다
👀 1
Hyeseong Kim
03/22/2022, 7:02 AM제 기억이 맞으면 2017년 말인가 2018년
Hyeseong Kim
03/22/2022, 7:24 AMGatsby 의 core concept 는 Relay compiler architecture 의 파생이 맞아요
Hyeseong Kim
03/22/2022, 7:24 AM그 어떤 프로젝트보다 더 릴레이스러운
t
Tony Won
03/22/2022, 1:04 PM
@이찬희
https://github.com/daangn/relay-next
https://www.npmjs.com/package/relay-next
시간이 없어서... 일단 문서는 없습니다 ㅋㅋㅋ example 폴더 참고하시면 될듯해요. 최신 Relay 버전에서는 타입 안맞는 이슈가 좀 있네요 ㅠ 수정이 필요할거같은데... 기여해주시면 감사하겠습니다 ㅋㅋ
👍 4
Tony Won
03/22/2022, 1:05 PM
u
이찬희
03/22/2022, 1:20 PM크 감사합니다 🙇♂️ 한번 살펴볼게요!! 최고
h
Hyeseong Kim
03/22/2022, 2:59 PM어디 뒤적거리다보면 누가 Entrypoints 쓴 예제가 나올법 한데
u
이찬희
03/23/2022, 1:26 AM@Tony Won 덕분에 문제 해결했습니다 relay 13 환경인데 큰 문제 없이 잘 작동합니다! peer deps 만 수정하면 될 것 같은데 PR 보내도 될까요?
👌 1