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

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로 각각의 개체를 생성한다