[GraphQL] Apollo Studio 란? ( feat.React )

Apollo Studio 란?

Apollo를 이용해서, Apollo Server와 Apollo Client를 쉽게 연결하고, ( GraphQL + Apollo + Frontend )

여러가지 추가 기능을 제공한다. 

 

Apollo Studio의 기능

• Apollo Server에서 실행했던 명령어들 ( Query, Mutation )의 기록을 확인할 수 있다.
• 추후 추가

 

---

Apollo Studio 사용 방법

 

1. 회원 가입하기

Apollo Studio

 

 

2. 새로운 그래프 만들기

로그인 화면

New Graph를 눌러 새로운 그래프를 만듭니다.

 

title - 그래프 이름 설정

type - 그래프 타입 설정 ( Deployed를 선택해줍시다. )

 

 

비밀 환경변수 설정하기 위한 dotenv설치

// npm 이용
npm i dotenv

// yarn 이용
yarn add dotenv

 

서버에서 dotenv 불러오기

// 서버 최상단 파일 ( 가장 먼저 실행되는 파일 )

import 'dotenv.config'
// require("dotenv")config()

 

아래의 코드를 복사해, 우리 Apollo Server안의 .env 파일에 붙여넣습니다.

( APOLLO_KEY는 서버 암호이므로 공유하면 안되요 )

//.env

APOLLO_KEY=service:내 그래프 API
APOLLO_GRAPH_REF=My-Graph-xcw6w@current
APOLLO_SCHEMA_REPORTING=true

 

붙혀넣었다면, 서버를 재시작 해줍시다.

apollo가 그래프를 인식한 모습

 

그래프가 인식될때까지 기다려줍니다.

Apollo Server를 인식한 모습

 

Apollo Server에 cors 옵션을 적용시켜 줍시다.

//server.js

const server = new ApolloServer({
  // cors로, 서버와 통신 가능한 도메인 주소 설정하기
  // client에서 사용할 도메인을 허용해줍시다. - localhost:포트번호
  cors: {
    origin: ["https://studio.apollographql.com", "http://localhost:3000"],
  },
  schema,
});

 

 

Explorer 버튼을 클릭해, 우리의 Apollo Server를 확인 할 수 있습니다. ( 기존의 playground 대체 )

 

3. 그래프와 프론트엔드단 연결하기

 

create-react-app을 사용해, 프론트엔드단을 만들어줍니다. (next도 가능)

// React
npx create-react-app@latest my-app

// Next
npx create-next-app@latest my-app

 

my-app 폴더에 들어가서 vscode를 실행시켜 줍니다.

 

.env 파일을 만들어서, Apollo Studio 설정을 해줍니다. ( dotenv모듈은, create-react-app 기본내장 )

//.env

APOLLO_KEY=나의 아폴로 서버 API키

 

apollo.config.js 파일로, Apollo 실행 설정을 해줍니다.

// apollo.config.js

// service를 자신의 그래프 이름으로 만들어줍시다. (아래는 예시)

module.exports = {
  client: {
    name: "Space Explorer [web]",
    service: "My-Graph-xcw6w@current",
  },
};

 

React 폴더내부에서 Apollo Client를 설치해줍니다.

npm i @apollo/client 

yarn add @apollo/client

 

우리가 사용할 Apollo Client를 가져와 줍니다. (그래프 연결)

// src/client.js

// client에서 사용할 모듈불러오기
import { ApolloClient, InMemoryCache } from "@apollo/client";

// Apollo Client 만들기 - uri에 우리의 Apollo Server 주소 넣어주기
const client = new ApolloClient({
    uri: "http://localhost:4000/graphql",
    cache: new InMemoryCache()
})

// 다른 파일에서 사용할 수 있도록 내보내주기
export default client

 

React에서 Apollo를 사용하기 위해, React App을 Provider로 감싸줍니다.

// src/index.js

// Apollo Client 불러오기
import client from "client";

// Apollo Client 적용할 부분 설정하기 위한 모듈
import { ApolloProvider } from "@apollo/client";

// Apollo Provider에 연결할 Apollo Client 전달하기
ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

 

App에서 Query 사용해, ApolloServer 데이터 불러오기

// 명령어(쿼리) 사용하기 위한 모듈 불러오기
import { gql, useQuery } from "@apollo/client";

function App() {
  // useQuery 사용해, GraphQL Query 사용하기
  const { data, loading, error } = useQuery(gql`
    query Users {
      users {
        id
        username
      }
    }
  `);
  // 쿼리 에러 관리
  if (error) return <span>Error</span>;
  // 쿼리 로딩 관리
  if (loading) return <span>Loading...</span>;
  // 에러x, 로딩x시 App 페이지 반환, 쿼리 내용 로그 출력
  console.log("users : ", data);

  return (
    <div className="App">
      ...페이지 내용
    </div>
  );
}

export default App;

 

React 실행결과!

서버에서 데이터를 가져온 모습!