728x90
쿼리(query, 데이터 조회)
1.
{
hero {
name
}
}
{
"data": {
"hero": {
"name": "R2-D2"
}
}
}
2.
{
hero {
name
# 이런 식으로 GraphQL 내에서 주석도 작성할 수 있습니다.
friends {
name
}
}
}
{
"data": {
"hero": {
"name": "R2-D2",
"friends": [
{
"name": "Luke Skywalker"
},
{
"name": "Han Solo"
},
{
"name": "Leia Organa"
}
]
}
}
}
전달인자(Arguments)
{
human(id: "1000") {
name
height
}
}
{
"data": {
"human": {
"name": "Luke Skywalker",
"height": 1.72
}
}
}
별명(Aliases)
{
hero(episode: EMPIRE) {
name
}
hero(episode: JEDI) {
name
}
}
{
empireHero: hero(episode: EMPIRE) {
name
}
jediHero: hero(episode: JEDI) {
name
}
}
{
"data": {
"empireHero": {
"name": "Luke Skywalker"
},
"jediHero": {
"name": "R2-D2"
}
}
}
오퍼레이션 네임(Operation name)
query HeroNameAndFriends {
hero {
name
friends {
name
}
}
}
{
"data": {
"hero": {
"name": "R2-D2",
"friends": [
{
"name": "Luke Skywalker"
},
{
"name": "Han Solo"
},
{
"name": "Leia Organa"
}
]
}
}
}
변수(Variables)
query HeroNameAndFriends($episode: Episode) {
hero(episode: $episode) {
name
friends {
name
}
}
}
뮤테이션(mutation, 데이터 수정)
mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
createReview(episode: $ep, review: $review) {
stars
commentary
}
}
스키마/타입(Schema/Type)
type Character {
name: String!
appearsIn: [Episode!]!
}
리졸버(Resolver)
const db = require("./../db")
const resolvers = {
Query: { // **Query :** 저장된 데이터 가져오기 (REST 에 GET 과 비슷합니다.)
getUser: async (_, { email, pw }) => {
db.findOne({
where: { email, pw }
}) ... // 실제 디비에서 데이터를 가져오는 로직을 작성합니다.
...
}
},
Mutation: { // **Mutation :** 저장된 데이터 수정하기 ( Create , Update , Delete )
createUser: async (_, { email, pw, name }) => {
...
}
}
Subscription: { // **Subscription :** 실시간 업데이트
newUser: async () => {
...
}
}
};
'프로그래밍 > 개발 언어' 카테고리의 다른 글
Next.js 터미널 코드(npx create-next-app@latest를 곁들인..) (0) | 2022.12.08 |
---|---|
React.memo/useMemo, useCallback (0) | 2022.09.27 |
React Hooks (0) | 2022.07.28 |
[React] 상태관리 (0) | 2022.07.07 |
[React] Cmarket Redux (0) | 2022.07.06 |
댓글