graphQL이용하여 축구선수 명단페이지 생성

apollo와 graphQL을 이용하여 간단한 페이지를 만들었다.

아주아주 간단하다.

restAPI를 사용하지 않고 graphQL을 이용하여 클라이언트, 서버를 직접 만들었다는 것에 의의를 둔다.

서버

서버 생성은 이 페이지를 참고하고 쿼리가 작동하는지 실험하기 위해 노마드코더에서 배운 graphql-yoga를 사용했다.

DB

db.js에 다음과 같이 하드코딩하여 데이터를 만들었다.

//객체를 여러개 만들기 위해 class를 사용
class Player {
  constructor(id, nationality, position, name, image) {
    this.id = id;
    this.nationality = nationality;
    this.position = position;
    this.name = name;
    this.image = image;
  }
}

export const champion = [
  new Player(0, "Korea", "MF", "J.S Park", "https://aneun-dongne.s3.ap-northeast-2.amazonaws.com/jisung-park.png"),
  new Player(1, "England", "FW", "Rooney", "https://aneun-dongne.s3.ap-northeast-2.amazonaws.com/wayne-rooney.png"),
  new Player(2, "Brazil", "MF", "Kaka", "https://aneun-dongne.s3.ap-northeast-2.amazonaws.com/kaka.png"),
];

Schema와 index.js

//schema.graphql
type Players {
  id: Int!
  nationality: String!
  position: String!
  name: String!
  image: String!
}

type Query {
  players: [Players]!
}

//---------------
//index.js
import { GraphQLServer } from "graphql-yoga";
import { champion } from "./src/database/db";

const resolvers = {
  Query: {
    players: () => champion,
  },
};

const server = new GraphQLServer({
  typeDefs: "./src/graphql/schema.graphql",
  resolvers,
});

server.start(() => console.log("GraphQL Server is running"));

클라이언트

react-router-dom, styled-components까지 일일이 설명하면 길어질것 같으니 생략하고

공부했던 graphQL을 이용한 부분만 언급

graphQL을 효과적으로 이용할 수 있도록 도와주는 apollo를 사용했다.

apolloClient.js

import { ApolloClient, InMemoryCache } from "@apollo/client";

//App.js에서 client로 import하고 , ApolloProvider에 할당한다.
export const client = new ApolloClient({
  uri: "http://localhost:4000",//서버 uri
  cache: new InMemoryCache(),//아폴로는 캐시를 이용하여 네트워크 요청을 줄일 수 있다..
});

App.js

ApolloProvider를 이용하여 모든 컴포넌트에서 Apollo를 이용할 수 있도록함.

import { client } from "./apolloClient";
import { ApolloProvider } from "@apollo/client";
import { Route, Link, Routes } from "react-router-dom";
import Home from "./pages/Home";

import PlayerPage from "./pages/PlayerPage";

function App() {
  return (
    <ApolloProvider client={client}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/player" element={<PlayerPage />} />
      </Routes>
    </ApolloProvider>
  );
}

export default App;

PlayerPage.js (useQuery 부분)

useQuery를 이용하면 개발자가 수동으로 로딩, 예외처리를 추적하지 않아도 되는 편리함이 있다.

 

import { HOME_PAGE } from "../queries"; 이 부분은 query인데 밑에 부분에서 설명이 있다.

const { loading, error, data } = useQuery(HOME_PAGE); 이부분을 통해서 자동으로 로딩, 예외처리, 정상응답을 추적할 수 있다.

import { useQuery } from "@apollo/client";
import React from "react";
import PlayersInfo from "../component/PlayersInfo";
import { HOME_PAGE } from "../queries";
import Loading from "../component/Loading";
import { Button } from "./Home";
import { Link } from "react-router-dom";

export default function PlayerPage() {
  const { loading, error, data } = useQuery(HOME_PAGE);
  if (loading) return <Loading />;
  if (error) return <span>Error..</span>;

  return (
    <>
      <Link to="/">
        <Button>홈</Button>
      </Link>
      {data.players.map((player) => {
        console.log(player);
        return (
          <div key={player.id}>
            <PlayersInfo
              name={player.name}
              image={player.image}
              position={player.position}
              nationality={player.nationality}
            />
          </div>
        );
      })}
    </>
  );
}

Queries.js

이런식으로 각각의 url에 요청을 보내지 않고, 만들어둔 query들을 필요한 컴포넌트에서 가져다 쓰기만 하면 되는것같다.

기존 restAPI에서는 클라이언트의 선택권 없이 서버에서 응답으로 전달하는 값을 주는대로 받았기 때문에 underfetching, overfetching이 있었고 이럴때마다 추가 요청을 해야했다.

하지만 graphQL에서는 클라이언트가 필요한 data만 요청하고 응답받을 수 있다.

//client에서 graphQL을 작성하는 방법, graphQL syntax
import { gql } from "@apollo/client";

export const HOME_PAGE = gql`
  {
    players {
      id
      name
      nationality
      image
      position
    }
  }
`;

graphQL과는 관련없는 나머지코드는 깃허브에서

---

참고자료

https://velog.io/@gwak2837/Apollo-Server%EB%A1%9C-GraphQL-API-%EC%84%9C%EB%B2%84-%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0-1

https://www.apollographql.com/docs/react/get-started/

https://graphql.org/learn/queries/