React + GraphQL - Typescript 시작하기 - 1

Express + GraphQL + MongoDB 시작하기 - 3에서 이어지는 내용

https://velog.io/@mkh1213/Express-GraphQL-MongoDB-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-3

서버 설정 후 화면쪽에서 GraphQL을 사용하기 위한 설정 진행.

Apollo란

Apollo란 GraphQL의 클라이언트 라이브러리 중 하나로 GraphQL을 사용한다면 거의 필수적으로 사용하는 상태 관리 플랫폼

• CRA를 통해 리액트 프로젝트를 생성

npx create-react-app 프로젝트이름 --template typescript

• react-router-dom 설치(V6)

npm i react-router-dom

• apollo-client 설치 - React - Hook을 사용할 예정

npm i apollo-boost @apollo/react-hooks graphql

• apollo-boost는 Apollo Client 설치에 필요한 모든 패키지를 포함하고 있다.
• @apollo/react-hooks GraphQL을 Hook처럼 사용 가능하게 해주는 역할.
• graphql은 Facebook에서 만든 API용 쿼리 언어인 GraphQL에 대한 JavaScript 참조 구현.

참조구현이란?

참조 구현(Reference implementation)은 다른 사람들이 어떠한 하드웨어 혹은 소프트웨어를 구현하는 것을 돕기 위해 제공하는 샘플 프로그램이다. 샘플 구현(Sample implementation) 또는 모델 구현(Model implementation)이라고도 불린다.
출처: https://ko.wikipedia.org/wiki/%EC%B0%B8%EC%A1%B0_%EA%B5%AC%ED%98%84

• src/apollo/cache.ts 생성

• src/apollo/client.ts 생성

• cache.ts

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

export const cache = new InMemoryCache();

• client.ts

import { ApolloClient, createHttpLink } from "@apollo/client";
import { cache } from "./cache";

const httpLink = createHttpLink({
  uri: "http://localhost:5000/graphql",
});

export const client = new ApolloClient({
  link: httpLink,
  cache: cache,
});

• src/components/Navigation.tsx 생성
• src/pages/Home.tsx 생성
• src/App.tsx 파일 수정

import React from 'react';
import Router from "./Router";
import { ApolloProvider } from "@apollo/client";
import { client } from "./apollo/client";

function App() {
  return (
    <ApolloProvider client={client}>
      <Router />
    </ApolloProvider>
  );
}

export default App;

• src/gql/home.gql.ts 생성

import gql from 'graphql-tag';

export const GET_USER = gql`
    query getUser(
        $email: String!
        $password: String!
    ) {
        getUser(
            email: $email
            password: $password
        ) {
            email
        }
    }
`

• src/components/Navigation.tsx 수정

import React from "react";
import { Link } from "react-router-dom";

function Navigation() {
  return (
    <div className="nav">
      <Link to="/">Home</Link>
    </div>
  );
}

export default Navigation;

• src/pages/Home.tsx 수정

import React from "react";

function Home() {
  return (
    <div>
      HOME PAGE!
    </div>
  );
}

export default Home;

• src/Router.tsx 생성

import React from "react";
import { BrowserRouter , Route, Routes } from "react-router-dom";
import Navigation from "./components/Navigation";
import Home from "./pages/Home";

function Router(props: any) {
  return (
    <BrowserRouter >
      <Navigation />
      <br />
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter >
  );
}

export default Router;

react-router-dom v6은 사용방법.

• component 대신 element 사용
• import한 component명 대신 직접 태그 삽입
  v5: component={Home} v6: element={<Home/>}
• Switch 대신 Routes이 사용
• exact가 사라짐
• 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 * 을 사용

<Route path="/" element={<Home />} />
<Route path="/page1/*" element={<Page1 />} />
<Route path="/page2/*" element={<Page2 />} />

• 차이점은 그때 그때 적을 예정

다음 포스팅부터 CRUD에 필요한 화면쪽 코드 작성