REST API처럼 수많은 API를 만들지 않아도 됨
![수많은API](https://private-user-images.githubusercontent.com/113084653/298069768-9c75d8ae-83de-41b0-b077-e8e2db3f51b3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxODUwMzcsIm5iZiI6MTcyNTE4NDczNywicGF0aCI6Ii8xMTMwODQ2NTMvMjk4MDY5NzY4LTljNzVkOGFlLTgzZGUtNDFiMC1iMDc3LWU4ZTJkYjNmNTFiMy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwOTU4NTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yOTQxNDIwMDdjMmUwMzM4YjM3NDExM2RkZTk0YzljNzRiMDNiZmNkYzMzOGQ1MTkwM2QxODk0NTUyODlmYTFiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.B0ln4Z0EkE1MJOdcbSZ00RcVQUBdbZtE9M8ShJLGjCs)
![간략한 API](https://private-user-images.githubusercontent.com/113084653/298070915-72a6ba74-7739-4a9b-a050-724a536be75a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxODUwMzcsIm5iZiI6MTcyNTE4NDczNywicGF0aCI6Ii8xMTMwODQ2NTMvMjk4MDcwOTE1LTcyYTZiYTc0LTc3MzktNGE5Yi1hMDUwLTcyNGE1MzZiZTc1YS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwOTU4NTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yMjE4ZTg0NjlmNzMxNDljYzA2NjFjNjc3MWUzODU1NGU3ZjUzN2E0MDIxNDUyZDFjNjRiYTk5YjI4MTBlOGIzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.n-1bQV-6S7FimrHNVrzxnmvfvX8CEfj5z1cWxuA7zvg)
REST API의 오버패칭 같은 경우, 내가 원하지 않는 정보까지 가져옴
![오버패칭단점](https://private-user-images.githubusercontent.com/113084653/298067405-673f4603-23d7-47b1-ba99-773298663a40.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxODUwMzcsIm5iZiI6MTcyNTE4NDczNywicGF0aCI6Ii8xMTMwODQ2NTMvMjk4MDY3NDA1LTY3M2Y0NjAzLTIzZDctNDdiMS1iYTk5LTc3MzI5ODY2M2E0MC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwOTU4NTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00NjIwMjhmMTI5MmQxY2ViOWVhY2JmNzFlMjNiMjc3OGVkZGU1M2ExZmVlYTg1MjQzNzE5ZTBlNWYyOWM1M2Y1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.Xugj-RRu81IQuClxLo5EYIIQS4h9glzcQMlp27Dz6s4)
GraphQL은 필요한 정보만 요청해서 가져옴
![그래프오버패칭장점](https://private-user-images.githubusercontent.com/113084653/298068212-37c774a0-eeca-4c70-9d58-415e4343e89a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxODUwMzcsIm5iZiI6MTcyNTE4NDczNywicGF0aCI6Ii8xMTMwODQ2NTMvMjk4MDY4MjEyLTM3Yzc3NGEwLWVlY2EtNGM3MC05ZDU4LTQxNWU0MzQzZTg5YS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwOTU4NTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jNTcyZGYwODk5MzgyY2QwZWIyYzgwNmVkNjY0MzU2ZTk4ZjM0NmEwYTY3NWIwYjczZmJhYWQ4NWIxNjQ0MTYxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.fR4K4okGicHIHiDkAaZ9aywc53Q-yfXviP_3A_ruTpM)
REST API의 언더패칭 같은 경우, 내가 필요한 정보를 덜 가져옴
![언더패칭](https://private-user-images.githubusercontent.com/113084653/298070582-6f56a227-61e3-4a42-b6ba-bc21d4054150.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxODUwMzcsIm5iZiI6MTcyNTE4NDczNywicGF0aCI6Ii8xMTMwODQ2NTMvMjk4MDcwNTgyLTZmNTZhMjI3LTYxZTMtNGE0Mi1iNmJhLWJjMjFkNDA1NDE1MC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwOTU4NTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00MjRkNDI2OTlkOGEzMzVjMTY4ZmI0MTMzOTRiZDBmYjk1NTMyZjkzYzczY2ZkMmQwYjdkZGZmZGQ3ZWJmZDc0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.tOIZkdQhaHH2ynqctjPn_QiI0hM2DSZE0_QGOc6sj5Q)
![언더패칭2](https://private-user-images.githubusercontent.com/113084653/298071680-80a2d6b2-2c09-4e97-b539-61ef8e76308a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxODUwMzcsIm5iZiI6MTcyNTE4NDczNywicGF0aCI6Ii8xMTMwODQ2NTMvMjk4MDcxNjgwLTgwYTJkNmIyLTJjMDktNGU5Ny1iNTM5LTYxZWY4ZTc2MzA4YS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwOTU4NTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hZTkxMjc3YzE5OGQ4ZGE2YTczOTkwZDU4MjEyN2NmMmVmYmYwMWM0MzkzNjlkYWRmMmU4ZTc4MmM3OWIwMDUwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.90EAqyts1W_fr_I1AnZsDrsAYBNKA5Xrc_YgULD4y0k)
"dependencies": {
"apollo-server": "^3.13.0",
"graphql": "^16.8.1"
},
import { ApolloServer, gql } from "apollo-server";
// query - GET
// Mutationn - POST DELETE PUT
// !가 없다면 null이 들어가도 됨 -> !가 붙었다면 꼭 값이 있어야함 (!=required)
const tweets = [
{
id: "1",
text: "hello",
},
{
id: "2",
text: "hi",
},
];
const typeDefs = gql`
type User {
id: ID
username: String
}
type Tweet {
id: ID!
text: String!
author: User
}
type Query {
allTweets: [Tweet!]!
tweet(id: ID): Tweet
}
type Mutation {
postTweet(text: String!, userId: ID!): Tweet!
deleteTweet(id: ID!): Boolean!
}
`;
const resolvers = {
Query: {
allTweets() {
return tweets;
},
tweet(root, { id }) {
return tweets.find((tweet) => tweet.id === id);
},
},
};
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
console.log(`Runnig on ${url}`);
});
query HeroNameAndFriendsQuery {
hero {
id
name
friends {
id
name
}
}
}
{
"hero": {
"id": "2001",
"name": "R2-D2",
"friends": [
{
"id": "1000",
"name": "Luke Skywalker"
},
{
"id": "1002",
"name": "Han Solo"
},
{
"id": "1003",
"name": "Leia Organa"
}
]
}
}