[GraphQL] 3. useQuery

노마드 코더의 [GraphQL로 영화 웹 앱 만들기] 
강의를 보고 정리한 글입니다.

 

장점

GraphQL의 useQuery hook을 사용하면 선언형으로 코드를 작성할 수 있다.

 

선언형 코드 : 원하는 걸 설명하기 위한 코드만을 적는다

명령형 코드 : 모든 단계의 코드를 적는다.

 

명령형

- 쿼리 요청을 보내고 -> state에 저장한다

 

function Movies() {
    const [movies, setMovies] = useState([]);
    const client = useApolloClient();
    
    useEffect(() => {
        client
          .query({
            query: gql`
              {
                allMovies {
                  title
                  id
                }
              }
            `,
          })
          .then((result) => setMovies(result.data.allMovies));
      }, [client]);
  	}
  	...
}

 

선언형

- 무엇을 원하는지 적는다

 

const ALL_MOVIES = gql`
  query getMovies {
    allMovies {
      title
      id
    }
  }
`;

function Movies() {
  const { data } = useQuery(ALL_MOVIES);
  ...
}

 

사용법 : 변수가 없을 때

- data, loading, error 

 

const ALL_MOVIES = gql`
  query getMovies {
    allMovies {
      title
      id
    }
  }
`;

function Movies() {
  const { data, loading, error } = useQuery(ALL_MOVIES);
  if (loading) return <h1>loading...</h1>;
  if (error) return <h1>Colud not fetch :(</h1>;
  return (
    <ul>
      {data.allMovies.map(movie => <li key={movie.id}>{movie.title}</li>)}
    </ul>
   );
}

 

사용법 : 변수가 있을 때

- variables에 필요한 변수를 작성한다.

 

import { gql, useQuery } from "@apollo/client";
import { useParams } from "react-router-dom";

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

function Movie() {
  const { id } = useParams();

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

  if (loading) <h1>Fetching Movie...</h1>;
  if (error) <h1>Could not fetch :(</h1>;
  return <div>{data.movie.title}</div>;
}

export default Movie;

 

InMemoryCache

쿼리 결과가 브라우저 메모리에 있는 cache에 저장되기 때문에

최초의 fetch 이후에는 fetch를 하지 않고 loading 없이 화면을 볼 수 있다.