jerrynim-profile

Javascript Developer๐Ÿ•น

open

Start your first blog contents

GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data.

์‹œ์ž‘ํ•˜๋ฉฐ...

์ด์ „์— Graphql์„ ์ด์šฉํ•˜์—ฌ ํŒŒ์ผ์„ ์—…๋กœ๋“œ ํ•˜๋Š”๋ฐ ์–ด๋ ค์›€์ด ์žˆ์–ด Restful API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ณ„๋„์˜ ์„œ๋ฒ„๋ฅผ ๋งŒ๋“ค์–ด ํŒŒ์ผ์—…๋กœ๋“œ๋ฅผ ํ•˜์˜€๋Š”๋ฐ, ์ด๋ฒˆ์— ๋‚˜์ค‘์„ ์ƒ๊ฐํ•˜์—ฌ ํŒŒ์ผ์—…๋กœ๋“œ๊ฐ€ ๊ฐ€๋Šฅํ•œ grahpql์„œ๋ฒ„ ๋ณด์ผ๋Ÿฌ ํ”Œ๋ ˆ์ดํŠธ๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์–ด์กŒ์Šต๋‹ˆ๋‹ค. ๊ณต์‹๋ฌธ์„œ์™€ ๋‹ค๋ฅธ๋ถ„์˜ ์ƒ˜ํ”Œ์„ ๋ณด๊ณ  ๊ฐœ์ธ์ ์œผ๋กœ ํŽธํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ๋ฐ”๊พธ์–ด ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ๊ณต์‹๋ฌธ์„œ graphql-upload : https://www.npmjs.com/package/graphql-upload graphql-upload-client : https://github.com/jaydenseric/apollo-upload-client [์ฐธ๊ณ ] : graphql-yoga/file-upload : https://github.com/prisma/graphql-yoga/tree/master/examples/file-upload

server

๊ฐ„๋‹จํ•œ graphqlserver๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

package.json

ํ•„์š”ํ•œ ๊ฒƒ๋“ค์„ ์•„๋ž˜์™€ ๊ฐ™์ด ์„ค์น˜ ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

"dependencies": { "graphql-tools": "^4.0.5", "graphql-upload": "^8.0.7", "graphql-yoga": "^1.18.0", "merge-graphql-schemas": "^1.5.8" }, "devDependencies": { "nodemon": "^1.19.1", "ts-node": "^8.3.0", "typescript": "^3.5.2", "@babel/core": "^7.4.5", "@babel/node": "^7.4.5", "@types/graphql-upload": "^8.0.0", "morgan": "^1.9.1" }

server.ts

graphql-yoga๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ graphqlserver๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. graphqlServer๋Š” typeDefs์™€ resolvers๋ฅผ ํ•„์š”๋กœ ํ•ฉ๋‹ˆ๋‹ค. แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2019-06-27 แ„‹แ…ฉแ„’แ…ฎ 8.06.46.png schema.ts graphqlserver์— ํ•„์š”ํ•œ schema๋ฅผ ๋”ฐ๋กœ Apiํด๋”๋ฅผ ๋งŒ๋“ค์–ด ์•ˆ์˜ graphqlํŒŒ์ผ๊ณผ tsํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์™€ ํ•ฉ์ณ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2019-06-27 แ„‹แ…ฉแ„’แ…ฎ 8.20.48.png ๊ฐ•์˜์—์„œ ๋ณด๊ณ  ์‚ฌ์šฉํ•˜๋Š” Apiํด๋” ๋‚ด์˜ graphql ๊ณผ ts ํŒŒ์ผ๋“ค์„ ๋ถˆ๋Ÿฌ์™€ ํ•˜๋‚˜์˜ schema๋กœ ๋งŒ๋“ญ๋‹ˆ๋‹ค. singleUpload.graphql ํ•˜๋‚˜์˜ ํŒŒ์ผ์„ ์—…๋กœ๋“œํ•˜๊ธฐ ์œ„ํ•œ ์ฟผ๋ฆฌ ์ž…๋‹ˆ๋‹ค. แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2019-06-27 แ„‹แ…ฉแ„’แ…ฎ 8.24.02.png singleUpload.ts ํ•˜๋‚˜์˜ ํŒŒ์ผ์„ ์—…๋กœ๋“œํ•˜๊ธฐ ์œ„ํ•œ ๋ฆฌ์กธ๋ฒ„ ์ž…๋‹ˆ๋‹ค. แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2019-06-27 แ„‹แ…ฉแ„’แ…ฎ 8.24.40.png File.graphql graphql-upload๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ์œ„ํ•ด scalar Upload upload upload ์ฟผ๋ฆฌ๋Š” ํ•„์ˆ˜์ž…๋‹ˆ๋‹ค. แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2019-06-27 แ„‹แ…ฉแ„’แ…ฎ 8.25.33.png yarn start ์„œ๋ฒ„๋ฅผ ์‹คํ–‰์‹œ์ผœ์ค๋‹ˆ๋‹ค. yarn start Client CRA๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. npx create-react-app --typescript package.json apollo-upload-client, graphql, graphql-tag, apollo-client,apollo-cache-inmemory๋ฅผ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค "dependencies": { "apollo-cache-inmemory": "^1.6.2", "apollo-client": "^2.6.3", "apollo-upload-client": "^10.0.1", "graphql": "^14.3.1", "graphql-tag": "^2.10.1", "react": "^16.8.6", "react-apollo-hooks": "^0.4.5", "react-dom": "^16.8.6", "react-scripts": "3.0.1" }, "devDependencies": { "@types/apollo-upload-client": "^8.1.2", "@types/jest": "24.0.15", "@types/node": "12.0.10", "@types/react": "16.8.22", "@types/react-dom": "16.8.4", "typescript": "3.5.2" } client.ts ApolloProvider์— ์ œ๊ณตํ•  client๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค. แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2019-06-27 แ„‹แ…ฉแ„’แ…ฎ 8.36.20.png grapql query ์‹คํ–‰ํ•  graphql query๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค. แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2019-06-27 แ„‹แ…ฉแ„’แ…ฎ 8.37.02.png onChagne input์˜ onChange ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค. แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2019-06-27 แ„‹แ…ฉแ„’แ…ฎ 9.02.49.png Input type="file"๊ณผ onChangeํ•จ์ˆ˜๋ฅผ ๋„ฃ์–ด์ค๋‹ˆ๋‹ค. แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2019-06-27 แ„‹แ…ฉแ„’แ…ฎ 8.38.29.png yarn start Test แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2019-06-27 แ„‹แ…ฉแ„’แ…ฎ 8.41.41.png ํด๋ผ์ด์–ธํŠธ ์ฝ˜์†” แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2019-06-27 แ„‹แ…ฉแ„’แ…ฎ 8.43.00.png ์„œ๋ฒ„ แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2019-06-27 แ„‹แ…ฉแ„’แ…ฎ 8.44.18.png ์„œ๋ฒ„์—์„œ ํŒŒ์ผ์„ ์ž˜๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. ์„œ๋ฒ„: https://github.com/jerrynim/gql-upload-sample ํด๋ผ์ด์–ธํŠธ : https://github.com/jerrynim/gql-upload-client-sample ์š”์•ฝ :๊ฐœ์ธ์ ์œผ๋กœ ๋‚˜์ค‘์— ์‚ฌ์šฉํ•  graphql-upload boilerplate๋ฅผ ๋งŒ๋“ค์—ˆ๋‹ค. ํ›„๊ธฐ : ์ด๊ฑธ ์„ค๋ช…ํ•˜๊ณ  ์ •๋ฆฌํ•˜๋ฉด์„œ ์จ์•ผํ•˜๋Š”๋ฐ ๊ธ€์“ฐ๋Š”๊ฒŒ ํž˜๋“ค๊ณ  ์ž˜๋ชป๋œ ์ •๋ณด๋ฅผ ์“ธ๊ฐ€๋ด ํ•จ๋ถ€๋กœ ๋ชป์“ฐ๊ฒ ๋„ค์š” ๐Ÿคฃ