Apollo Client Part - 1

Apllo client에 대해서 알아보자. Apllo client는 전역 상태관리 뿐만 아니라 data fetching에 대한 여러 기능도 가지고 있다. 마치 redux와 react-query를 같이 합쳐 놓은 듯한 상태관리 라이브러리이다.

• 초기설정
• 기본적인 query 작성
• useQuery로 data fetching 하기
• 변수를 넣어서 useQuery data fetching 하기
• 그 밖의 내용
  • Apollo cache

초기 설정하기

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    // Provider로 감싸준다.
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>

query 작성하기

// 컴포넌트

const client = useApolloClient();

 useEffect(() => {
   // query 작성하기
    client.query({
      query: gql`
        {
          allTweets {
            text
          }
        }
      `,
    })
   // setState 
   .then((res) => setData(res.data.allTweets));
  }, [client]);

useQuery로 data fetching 하기

const GET_MOVIES = gql`
  // 원하는 명칭을 써줄 수 있다.
  query getMovies{
    allTweets {
	  text
	}
  }	
`;

// 인자에는 gql을 넣어준다.
const { data, called, loading } = useQuery(ALL_MOVIES);

변수 넣어서 Query 작성하기

const GET_MOVIE = gql`
  query getMovie($movieId:String!) {
    movie(id: $movieId){
	  id
	  title
    }
  }
`;

const { data, loading, error} = useQuery(GET_MOVIE, {
  variables: {
    movieId: id,
  }
})

Apollo cache

• 한번 서버에서 가져온 값은 cache에 저장되기 때문에 다시 서버에게 요청하지 않는다. 즉 loading이 false 이다.