Apollo Client는 JavaScript 앱을 위한 완벽한 상태 관리 라이브러리입니다. 백엔드 및 프론트 엔드 모두에서 사용할 수 있기 때문에 강력한 도구입니다. 이 튜토리얼에서는 먼저 Node JS를 사용하여 Apollo GraphQL Server를 구축 한 다음 React JS를 사용하여 클라이언트 측에서 데이터를 사용하여 둘 다에서 사용합니다.
https://dev.to/ibrahima92/apollo-graphql-how-to-build-a-full-stack-app-with-react-and-node-js-l41
GraphQl을 처음 사용하는 경우 이 튜토리얼이 도움이 될 수 있습니다. 그렇지 않으면 시작합시다.
Apollo, Node 및 GraphQl을 사용하여 서버 구축
이 가이드에서는 Github API를 사용하여 데이터를 표시 할 것이며 이 작업은 Apollo 및 Node JS로 구축 된 GraphQl 서버에서 수행됩니다.
그렇게 하려면 터미널에서 다음 명령을 실행하여 새 Node JS 프로젝트를 설정해야 합니다.
yarn init설정이 완료되면 이제 이 명령을 실행하여 필요한 패키지를 설치할 수 있습니다.
yarn add apollo-server graphql axios이제 서버를 구축하는 데 필요한 모든 것을 갖추었습니다. 먼저 서버의 진입점이 될 루트에 새로운 파일 app.js를 만들어 봅시다.
다음으로, 데이터의 모양을 반영하는 Graphql 스키마를 정의해야 합니다.
GraphQl 스키마
스키마는 데이터 그래프의 모양을 설명합니다. 백엔드 데이터 저장소에서 채워지는 필드로 유형 세트를 정의합니다. app.js 파일에 새로운 스키마를 추가해 봅시다.
const { ApolloServer, gql } = require("apollo-server")
const axios = require("axios")
const typeDefs = gql`
type User {
id: ID
login: String
avatar_url: String
}
type Query {
users: [User]
}
`보시다시피 Github API에서 제공하는 모든 데이터를 사용하지는 않습니다. 우리는 React App, 로그인 및 avatar_url에서 참조 키로 사용될 ID가 필요합니다. 또한 사용자 배열을 반환하는 쿼리 users도 있습니다.
이제 GraphQL 스키마가 생겼습니다. 이제 쿼리 작업을 완료하기 위해 해당 리졸버를 빌드해야 합니다.
GraphQl resolvers
리졸버는 GraphQL 쿼리에서 응답을 생성하는 데 도움이 되는 함수 모음입니다. app.js 파일에 새로운 리졸버를 추가해 봅시다.
const resolvers = {
Query: {
users: async () => {
try {
const users = await axios.get("https://api.github.com/users")
return users.data.map(({ id, login, avatar_url }) => ({
id,
login,
avatar_url,
}))
} catch (error) {
throw error
}
},
},
}리졸버는 이름으로 적절한 스키마를 일치시켜야 합니다. 따라서 여기서 사용자는 스키마에 정의 된 사용자 쿼리를 나타냅니다. axios의 도움으로 API에서 데이터를 가져 와서 ID, 로그인 및 avatar_url을 예상대로 리턴 하는 함수입니다.
그리고 그 작업을 완료하는 데 시간이 걸릴 수 있으므로 async / await를 사용하여 결과적으로 처리합니다.
이제 다음 섹션에서 Apollo Server를 만들 수 있습니다.
아폴로 서버 생성
app.js 파일에서 아폴로 서버 패키지에서 객체를 인수로 받는 생성자인 ApolloServer를 가져온 것을 기억하십시오.
그리고 해당 객체는 서버를 생성 할 수 있도록 스키마와 리졸버를 포함해야 합니다.
이제 ApolloServer로 app.js를 약간 조정 해 봅시다.
const server = new ApolloServer({
typeDefs,
resolvers,
})
// typeDefs: typeDefs,
// resolvers: resolvers
server.listen().then(({ url }) => console.log(`Server ready at ${url}`))여기서 우리는 서버를 생성하기 위해 스키마와 리졸버를 보유한 객체를 매개 변수로 ApolloServer에 전달한 다음 수신합니다. 그 자리에 이제 기능 서버가 작동하게되었습니다.
다음 명령을 실행하여 GraphQL 플레이 그라운드를 사용하여 이미 게임을 하고 쿼리를 보낼 수 있습니다.
yarn start이제 http://localhost:400에서 미리 볼 수 있습니다
const { ApolloServer, gql } = require("apollo-server")
const axios = require("axios")
const typeDefs = gql`
type User {
id: ID
login: String
avatar_url: String
}
type Query {
users: [User]
}
`
const resolvers = {
Query: {
users: async () => {
try {
const users = await axios.get("https://api.github.com/users")
return users.data.map(({ id, login, avatar_url }) => ({
id,
login,
avatar_url,
}))
} catch (error) {
throw error
}
},
},
}
const server = new ApolloServer({
typeDefs,
resolvers,
})
server.listen().then(({ url }) => console.log(`Server ready at ${url}`))서버만으로는 많은 작업을 수행 할 수 없으므로 서버를 시작한 것처럼 package.json 파일에 시작 스크립트를 추가해야 합니다.
// first add nodemon: yarn add nodemon --dev
"scripts": {
"start": "nodemon src/index.js"
}이제 Github API에서 데이터를 가져 오는 서버가 생겼습니다. 이제 클라이언트쪽으로 이동하여 데이터를 사용할 차례입니다.
React를 사용하여 클라이언트 측 구축
가장 먼저 해야 할 일은 터미널에서 다음 명령을 실행하여 새로운 React 앱을 만드는 것입니다.
npx create-react-app client-react-apollo다음으로 Apollo 및 GraphQl 패키지를 설치해야 합니다.
yarn add apollo-boost @apollo/react-hooks graphql이제 index.js 파일을 업데이트하여 Apollo를 React 앱과 연결할 수 있습니다.
아폴로에 React 연결
import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient from 'apollo-boost'
import { ApolloProvider } from '@apollo/react-hooks';
import App from './App';
import './index.css';
import * as serviceWorker from './serviceWorker';
const client = new ApolloClient({
uri: 'https://7sgx4.sse.codesandbox.io'
})
ReactDOM.render(
<React.StrictMode>
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();보시다시피 ApolloClient와 ApolloProvider를 가져 오는 것으로 시작합니다.
첫 번째는 데이터를 가져올 때 사용할 URL에 대해 Apollo에 알리는 데 도움이 됩니다.
uri가 ApolloClient에 전달되지 않으면 현재 도메인 이름에 /graphql이 추가됩니다.
두 번째는 클라이언트 객체를 수신하여 Apollo를 React에 연결할 수 있는 공급자입니다.
즉, 이제 데이터를 표시하는 구성 요소를 만들 수 있습니다.
Fetching the data
App.js
import React from "react"
import { useQuery } from "@apollo/react-hooks"
import gql from "graphql-tag"
import "./App.css"
const GET_USERS = gql`
{
users {
id
login
avatar_url
}
}
`여기에 데이터를 가져 오는 간단한 GraphQL 쿼리가 있습니다. 해당 쿼리는 나중에 쿼리를 사용하여 Apollo에 가져올 데이터를 알려줍니다.
const User = ({ user: { login, avatar_url } }) => (
<div className="Card">
<div>
<img alt="avatar" className="Card--avatar" src={avatar_url} />
<h1 className="Card--name">{login}</h1>
</div>
<a href={`https://github.com/${login}`} className="Card--link">
See profile
</a>
</div>
)이 프리젠테이션 컴포넌트는 사용자를 표시하는 데 사용됩니다. 앱 구성 요소에서 데이터를 수신하여 표시합니다.
function App() {
const { loading, error, data } = useQuery(GET_USERS)
if (error) return <h1>Something went wrong!</h1>
if (loading) return <h1>Loading...</h1>
return (
<main className="App">
<h1>Github | Users</h1>
{data.users.map(user => (
<User key={user.id} user={user} />
))}
</main>
)
}
export default AppApollo가 제공하는 useQuery 후크는 GraphQL 쿼리를 수신하고 로드, 오류 및 데이터의 세 가지 상태를 반환합니다. 데이터를 성공적으로 가져 오면 사용자 컴포넌트에 전달합니다. 그렇지 않으면 오류가 발생합니다.
import React from "react"
import { useQuery } from "@apollo/react-hooks"
import gql from "graphql-tag"
import "./App.css"
const GET_USERS = gql`
{
users {
id
login
avatar_url
}
}
`
const User = ({ user: { login, avatar_url } }) => (
<div className="Card">
<div>
<img alt="avatar" className="Card--avatar" src={avatar_url} />
<h1 className="Card--name">{login}</h1>
</div>
<a href={`https://github.com/${login}`} className="Card--link">
See profile
</a>
</div>
)
function App() {
const { loading, error, data } = useQuery(GET_USERS)
if (error) return <h1>Something went wrong!</h1>
if (loading) return <h1>Loading...</h1>
return (
<main className="App">
<h1>Github | Users</h1>
{data.users.map(user => (
<User key={user.id} user={user} />
))}
</main>
)
}
export default App이제 React 및 Node JS를 사용하여 풀 스택 Apollo GraphQL 앱을 구축했습니다.
여기에서 Apollo GraphQL 서버 미리보기
여기에서 React 앱 미리보기
여기에서 소스 코드를 찾으십시오
등록된 댓글이 없습니다.
