React - Hook 리액트 훅 사용법 정리 (2) useQuery

 

#1. useQuery 사용법

이는 아폴로 클라이언트의 기존 사용법을 대처한다.

 

#0 클라이언트 정의

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "https://movieql.now.sh/"
});

export default client;

#1.1 루트 경로에 프로바이더 넣어주기.

기존의 사용법과 같이 쓰려면 훅프로바이더를 추가하는 방식으로 넣기.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { ApolloProvider } from "react-apollo";
import { ApolloProvider as ApolloHooksProvider } from "react-apollo-hooks";
import client from "./apolloClient";

//<App /> 이것을 컴포넌트라고 부른다. = HTML반환하는 함수.
//JSX : js + HTML 이다. 컴포넌트를 만들고 붙이고

//한번에 하나의 컴포넌트만 랜더를 해야한다. -> 그래서 App.js 에서 완성되서 나와야 한다.
ReactDOM.render(
  <ApolloProvider client={client}>
    <ApolloHooksProvider client={client}>
      <App />
    </ApolloHooksProvider>
  </ApolloProvider>,
  document.getElementById("root")
);

#1.2 GQL 정의 -> useQuery -> 사용하기

// GQL 정의 (기존이랑 동일)
import gql from "graphql-tag";

export const HOME_PAGE = gql`
  {
    movies(limit: 50, rating: 7) {
      id
      title
      genres
      rating
      medium_cover_image
    }
  }
`;
export const MOVIE_DETAILS = gql`
  query getMovieDetails($movieId: Int!) {
    movie(id: $movieId) {
      medium_cover_image
      title
      rating
      description_intro
      language
      genres
    }
    suggestions(id: $movieId) {
      medium_cover_image
      title
      rating
    }
  }
`;

//-------------------------------------------------------------------------
//useQuery 사용하기,

  //  const {loading,data,error} = useQuery(HOME_PAGE , {suspend : true}); 서스팬드는 로딩후 컴포넌트를 보여준다.
  const { loading, data, error } = useQuery(HOME_PAGE);
 //---------------------------------------
 //결과 사용하기
     <div>
      {loading && "loading..."}
      {error && "error : something is wrong"}
      {!loading &&
        data &&
        data.movies &&
        data.movies.map(movie => (
          <Movie
            id={movie.id}
            key={movie.id}
            poster={movie.medium_cover_image}
            title={movie.title}
            rating={movie.rating}
          />
        ))}
    </div>

 

#1.3 변수 + GQL 정의 -> useQuery -> 사용하기

const Detail = ({
  match: {
    params: { movieId }
  }
}) => {
  const { data, loading, error } = useQuery(MOVIE_DETAILS, {
    variables: { movieId }
  });

  return (
    <div>
      {loading && "loading..."}
      {error && "error : something is wrong"}
      {!loading && data && data.movie && (
        <React.Fragment>
          <Container>
            <Image src={data.movie.medium_cover_image} />
            <span>
              <Title>{data.movie.title}</Title>
              <Paragraph bold>Rating: {data.movie.rating}</Paragraph>
              <Paragraph>{data.movie.description_intro}</Paragraph>
            </span>
          </Container>
          <Title>Suggested</Title>
          <MovieContainer>
            {data.suggestions.map(movie => (
              <Movie
                key={movie.id}
                id={movie.id}
                title={movie.title}
                rating={movie.rating}
                poster={movie.medium_cover_image}
              />
            ))}
          </MovieContainer>
        </React.Fragment>
      )}
    </div>
  );
};
export default Detail;

 

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA