1. GraphQL ์ด๋?
API ๋ฅผ ์ํด ๋ง๋ ์ฟผ๋ฆฌ ์ธ์ด
Rest API ๋ ๊ฐ๊ฐ ๋ฆฌ์์ค์ ํด๋นํ๋ ์๋ํฌ์ธํธ๋ฅผ ์ด์ฉํด์ ๊ฐ์ ธ์จ๋ค๋ฉด, GraphQL ์ ์๋ํฌ์ธํธ๊ฐ ํ๊ฐ๋ค!
ํ๋์ ์๋ํฌ์ธํธ๋ฅผ ์ด์ฉํด์ ์ฟผ๋ฆฌ๋ฅผ ํตํด์ ๋ฐ์ดํฐ๋ฅผ ์๋ฒ์ ์์ฒญํ๊ฒ ๋๋ค!
const GET_DATA = gql`
query getData(dataId: ID!) {
data(id: $dataId) {
id
title
author {
id
name
photo
}
}
}
`;
2. ์์
1. ํด๋ผ์ด์ธํธ์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ธฐ ์ํด GraphQl ์๋ฒ์ ์ฟผ๋ฆฌ๋ฅผ ์ ์กํ๋ค. (POST or GET)
2. ์๋ฒ์์ ํด๋ผ์ด์ธํธ๋ก๋ถํฐ ์์ฒญ์ ๋ฐ์ผ๋ฉด GraphQL ์ฟผ๋ฆฌ๋ก ๋ฌธ์์ด์ ์ถ์ถํ๋ค.
=> ๋ง์ฝ ์์ฒญํ๋ ๋ฐ์ดํฐ๊ฐ ์คํค๋ง์ ์ ์๋์ด ์์ง ์๊ฑฐ๋, ์๋ชป๋ ์ฟผ๋ฆฌ ํ์์ธ ๊ฒฝ์ฐ์๋ ์ค๋ฅ ๋ฐ์.
3. ์๋ฒ๋ ํด๋ผ์ด์ธํธ์์ ์์ฒญํ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ธฐ ์ํด Resolver ๋ฅผ ์ด์ฉํด์ ํด๋นํ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฐํํด์ ํด๋ผ์ด์ธํธ๋ก ์ ์ก!
3. Resolver
๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ์ญํ ์ ํ๋ Resolver.
ํด๋ผ์ด์ธํธ์์ ์์ฒญํ ๋ฐ์ดํฐ์ ํด๋นํ๋ ํจ์๋ฅผ ์คํํด์ ๋ฐํํ๋ ์ญํ ์ ํ๋ค. ๊ฐ๊ฐ์ ํ๋๋ง๋ค ํ๋์ Resolver ๊ฐ ์กด์ฌํ๋ค๊ณ ์๊ฐํ๋ฉด๋๋ค. (ํด๋ผ์ด์ธํธ์์ ์์ฒญํ๋ ๋ฐ์ดํฐ๊ฐ ํฌํจ๋์ด ์๋ ํ๋์ Resolver ๋ฅผ ์คํํด์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์จ๋ค๊ณ ์ดํด)
tracksForHome: (parent, args, context, info) => {},
Resolver ๋ ์ด 4๊ฐ์ ์ธ์๋ฅผ ๊ฐ์ง๊ณ ์๋ค.
๊ฐ๋จํ ์์๋ณด๋ฉด,
1. parent : ๋ถ๋ชจ ํ๋์ ๊ฐ์ ๋ฆฌํด.
2. args : ํด๋ผ์ด์ธํธ์์ ์ ๋ฌํ ๊ฐ, ์ ๋ ฅ๊ฐ
3. context : ์ ์ญ์ ์ผ๋ก ์ฌ์ฉํ๋ ๊ฐ ex) ์ ์ ์ ๋ณด...
4. info : ํ๋ ์ ๋ณด
Resolver Chain
REST API ๋ฅผ ์ฌ์ฉํ ๋๋ ๊ฐ๊ฐ์ ์๋ ํฌ์ธํธ๋ฅผ ํธ์ถํด์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ ๊ฒ์ด๋ค.
๊ทธ ์์ ํ์์๋ ๋ฐ์ดํฐ๊ฐ ์๋๋ผ๋ ์ผ๋จ ํ์ํ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ธฐ ์ํด์๋ ๋ค ๊ฐ์ ธ์์ ๊ฒ์ด๋ค. (= Overfetching)
query GetBooksByLibrary {
libraries {
books {
author {
name
}
}
}
}
GraphQL ์ ์ฌ์ฉํ๋ค๋ฉด ํ์์ ํ๋๋ ๊ฒ์ํ ์ ์๊ธฐ ๋๋ฌธ์ (๊ณ์ธต๊ตฌ์กฐ) ,์ด๋ฌํ ๊ตฌ์กฐ๋ฅผ ์ฌ์ฉํด์ ํ์ํ ๋ฐ์ดํฐ๋ง ๊ฐ์ ธ์ฌ ์ ์๋ค.
# A library has a branch and books
type Library {
branch: String!
books: [Book!]
}
# A book has a title and author
type Book {
title: String!
author: Author!
}
# An author has a name
type Author {
name: String!
}
type Query {
libraries: [Library]
}
4. Query
๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ๋ ์ฌ์ฉ.
export const GET_TRACK = gql`
query GetTrack($trackId: ID!) {
track(id: $trackId) {
id
title
author {
id
name
photo
}
thumbnail
length
modulesCount
numberOfViews
modules {
id
title
length
}
description
}
}
`;
const {loading, error, data} = useQuery(GET_TRACK, {
variables: {trackId} // trackId ์๋ฒ๋ก ์ ๋ฌ
});
// loading: ๊ฒฐ๊ณผ๊ฐ ๋ฐํ๋๊ธฐ ์ ๊น์ง
// error: ์๋ฌ ๋ฐ์
// data: ๊ฒฐ๊ณผ๊ฐ
5. Mutations
๋ฐ์ดํฐ๋ฅผ ๋ณ๊ฒฝํ ๋ ์ฌ์ฉ.
const ADD_TODO = gql`
mutation AddTodo($type: String!) {
addTodo(type: $type) {
id
type
}
}
`;
function AddTodo() {
let input;
const [addTodo, { data, loading, error }] = useMutation(ADD_TODO);
if (loading) return 'Submitting...';
if (error) return `Submission error! ${error.message}`;
return (
<div>
<form
onSubmit={e => {
e.preventDefault();
addTodo({ variables: { type: input.value } });
input.value = '';
}}
>
<input
ref={node => {
input = node;
}}
/>
<button type="submit">Add Todo</button>
</form>
</div>
);
}
6. Caching
Apollo Client๋ GraphQL ์ฟผ๋ฆฌ ๊ฒฐ๊ณผ๋ฅผ ๋ฉ๋ชจ๋ฆฌ ์บ์์ ์ ์ฅํ๊ธฐ ๋๋ฌธ์, ๋ง์ฝ ๋ฉ๋ชจ๋ฆฌ ์บ์์ ์ ์ฅ๋ ๋ฐ์ดํฐ๋ฅผ ๋ค์ ๊ฐ์ ธ์ฌ ๊ฒฝ์ฐ์๋ ์๋ฒ์ ์์ฒญ์ ํ์ง ์๊ณ , ์ ์ฅ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฐ๋ก ๊ฐ์ ธ์ฌ ์ ์๋ค!
Apollo Client Devtools ์ ์ฌ์ฉํ์ฌ ์ฝ๊ฒ ํ์ธํ ์ ์๋ค!
'๐ WIL > ๐ Gql' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Apollo Client - Fetching (0) | 2022.11.10 |
---|