apoll-cilent 관련된 질문

Question

apoll-cilent 관련된 질문입니다. 질문1. 지금 강의에서는 api url이 한개만 있을 경우인데, 경로가 다 다른 경우는 어떻게 연결을 하나요?? client를 여러개 만들어서 porivder에 담아줘야하나요?? 질문2. provider는 꼭 app.jsx를 감싸야하나요?? 아니면 내부 컴토넌트안에서 원하는 컴포넌트를 provider로 감싸도 동일하게 사용이 가능한가요??

tamo · Answer

감사합니다.

노원두 · Answer

안녕하세요! 경언 님! 해당 문제는 크게 2가지의 경우에 따라서 달라질 수 있어요! 1. 한 회사에 2개의 graphql 서버(ex, 마이크로서비스)를 가지고 계신 경우 2. 서로 다른 두 회사의 graphql 서버인 경우 일반적으로 한 회사에 2개의 graphql 서버(ex, 마이크로서비스)를 가지고 계신 경우 에, 백엔드에서 api-gateway(graphql-gateway)를 만들고, 해당 gateway 뒷단에 2개의 서버를 배치하는 방식으로 구조를 만듭니다. 그리고 브라우저에서는 게이트웨이로 요청하시면 됩니다! 만약, 서로 다른 두 회사의 graphql 서버인 경우 에는 자체 api-gateway 백엔드를 구축하기 어려움으로, 브라우저에서 apollo-client 셋팅을 통해 설정하셔야 합니다! 해당 방법으로는 다이나믹URI를 참고 해 보시면 좋을 것 같아요! 참고) https://www.apollographql.com/docs/react/api/link/apollo-link-http/ 위 예제를 쉽게 풀면 아래와 같습니다 const customFetch = (_, options) => { // options => 현재 요청된 그래프큐엘정보 // options에 들어온 정보를 바탕으로 나만의주소를 변경하기(if문 등 사용) const 나만의주소 = "http://backend-practice.codebootcamp.co.kr/graphql" return fetch(나만의주소, options); // 요청된 그래프큐엘정보를 담아서 주소만 바꿔 보내기 }; const client = new ApolloClient({ link: new HttpLink({ fetch: customFetch }), cache: GLOBAL_STATE, }); 다만, 이러한 방식을 사용하시는 경우, 이후 뒷부분에서 배우는 apollo-cache를 사용하는데 주의 가 필요할 것 같아요!   끝으로 마지막 질문에 대한 답변을 드리면, provider는 어디에 있던 상관이 없습니다! 다만, provider가 감싸고 있는 내부 컴포넌트에서만 요청이 가능해요!