TIL: GraphQL, Apollo Client (3) Apollo qeury에 변수사용 - 220622

Lumpen·2022년 6월 22일
0

TIL

목록 보기
65/242

apollo graphql vscode extension 설치함..

apollo qeury에 변수를 담는다


const GET_MOVIE = gql`
  qeury getMovie($movieId:String!){ // movieId라는 변수는 문자열이고 꼭(!) 있어야 한다는 뜻
    movie(id: $movieId) { // query에 movieId라는 변수와 id가 일치하는 것 찾는다
      id
      title
    }
  }
`;
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
    }
  }
`;
export default function Movie() {
  const { id } = useParams();
  const { data, loading, error } = useQuery(GET_MOVIE, {
    variables: {
      movieId: id,
    },
  });
  if (loading) {
    return <h1>Feching movie..</h1>;
  }
  if (error) {
    return <h1>404</h1>;
  }
  return <div>{data.movie.title}</div>;
}
// server의 typeDefs
  type Query {
    allMovies: [Movie!]!
    allUsers: [User!]!
    allTweets: [Tweet!]!
    tweet(id: ID!): Tweet
    movie(id: String!): Movie
  }

한 번 fetching한 데이터를 다시 불러올 경우 loading이 발생하지 않는다
-> apollo의 캐싱 기능으로 처음에 in memory cache 설정을 해줬기 때문

같은 type, 같은 id를 갖는 객체의 추가적인 데이터를 요청하면
apollo에서 새로운 데이터를 cache 안에 추가한다

apollo client는 id로 각각의 개체를 생성한다

profile
떠돌이 생활을 하는. 실업자는 아니지만, 부랑 생활을 하는

0개의 댓글