G\u00fcn\u00fcm\u00fcz web uygulamalar\u0131n\u0131n ayr\u0131lmaz bir par\u00e7as\u0131 olan dosya y\u00f6netimi, kullan\u0131c\u0131lar\u0131n belge, g\u00f6rsel, video gibi \u00e7e\u015fitli medya t\u00fcrlerini y\u00fcklemesine, indirmesine, g\u00f6r\u00fcnt\u00fclemesine ve silmesine olanak tan\u0131r. Bu t\u00fcr i\u015flevsellikleri sa\u011flamak i\u00e7in g\u00fc\u00e7l\u00fc ve esnek bir mimariye ihtiya\u00e7 duyar\u0131z. Geleneksel REST API’leri bu konuda iyi bir i\u015f \u00e7\u0131karsa da, GraphQL’in sundu\u011fu esneklik ve veri \u00e7ekme g\u00fcc\u00fc, \u00f6zellikle karma\u015f\u0131k veri yap\u0131lar\u0131 ve kaynaklar aras\u0131 ili\u015fkilerin oldu\u011fu senaryolarda \u00f6nemli avantajlar sa\u011flayabilir. Bu makalede, modern bir dosya i\u015fleme uygulamas\u0131n\u0131 GraphQL’i bir arka u\u00e7 teknolojisi olarak kullanarak ve Vue.js’i \u00f6n y\u00fcz \u00e7er\u00e7evesi olarak tercih ederek nas\u0131l geli\u015ftirece\u011fimizi ayr\u0131nt\u0131l\u0131 bir \u015fekilde inceleyece\u011fiz. Ad\u0131m ad\u0131m bir geli\u015ftirme s\u00fcreciyle, hem arka u\u00e7ta hem de \u00f6n y\u00fczde dosya y\u00fckleme, listeleme ve silme gibi temel i\u015flevleri nas\u0131l uygulayaca\u011f\u0131m\u0131z\u0131 \u00f6\u011frenece\u011fiz.<\/p>\n
GraphQL, API’ler i\u00e7in bir sorgu dili ve \u00e7al\u0131\u015fma zaman\u0131 olup, istemcilerin tam olarak ihtiya\u00e7 duyduklar\u0131 veriyi istemesine olanak tan\u0131r. Bu, \u00f6zellikle dosya i\u015fleme gibi, dosyan\u0131n kendisiyle birlikte metadata (dosya ad\u0131, boyutu, t\u00fcr\u00fc, y\u00fcklenme tarihi vb.) y\u00f6netilmesi gereken durumlarda b\u00fcy\u00fck faydalar sa\u011flar.<\/p>\n
Geleneksel REST API’lerinde, dosya y\u00fckleme genellikle ayr\u0131 bir endpoint (\u00f6rn. GraphQL ise, dosya y\u00fcklemeyi “GraphQL Multipart Request Specification” ad\u0131 verilen \u00f6zel bir y\u00f6ntemle ele al\u0131r. Bu y\u00f6ntem, bir GraphQL mutasyonunun bir par\u00e7as\u0131 olarak dosya verilerini g\u00f6ndermeyi m\u00fcmk\u00fcn k\u0131lar. Bu sayede, dosya y\u00fckleme i\u015flemi s\u0131ras\u0131nda dosya metadata’s\u0131n\u0131 ve hatta di\u011fer ilgili verileri (\u00f6rne\u011fin, dosyan\u0131n hangi kullan\u0131c\u0131ya ait oldu\u011fu, hangi projeye y\u00fcklendi\u011fi) tek bir istekte g\u00f6nderebiliriz. Benzer \u015fekilde, dosyalar\u0131 listelerken, istemci yaln\u0131zca ihtiya\u00e7 duydu\u011fu metadata alanlar\u0131n\u0131 sorgulayabilir, bu da a\u011f trafi\u011fini azalt\u0131r ve performans\u0131 art\u0131r\u0131r.<\/p>\n * Tek \u0130stekle \u00c7oklu \u0130\u015flem:<\/strong> Dosya y\u00fcklerken metadata ile birlikte di\u011fer ilgili verileri tek bir mutasyon i\u00e7inde g\u00f6nderebilme. Bu uygulamay\u0131 geli\u015ftirmek i\u00e7in a\u015fa\u011f\u0131daki temel teknolojileri kullanaca\u011f\u0131z:<\/p>\n Arka u\u00e7ta API katman\u0131n\u0131 olu\u015fturmak i\u00e7in GraphQL kullanaca\u011f\u0131z. Genellikle Node.js ekosisteminde Apollo Server veya NestJS gibi \u00e7er\u00e7eveler tercih edilir. Bu makalede, Apollo Server’\u0131 Node.js ve Express ile birlikte kullanaca\u011f\u0131z.<\/p>\n \u00d6n y\u00fcz kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc olu\u015fturmak i\u00e7in progresif JavaScript \u00e7er\u00e7evesi Vue.js’i kullanaca\u011f\u0131z. Vue’nun reaktif veri ba\u011flama ve bile\u015fen tabanl\u0131 yap\u0131s\u0131, dosya listeleme ve y\u00fckleme aray\u00fczlerini geli\u015ftirmeyi kolayla\u015ft\u0131r\u0131r.<\/p>\n * Node.js & Express:<\/strong> Arka u\u00e7 sunucusunu kurmak i\u00e7in. * Vue CLI:<\/strong> Vue projesini h\u0131zl\u0131ca ba\u015flatmak i\u00e7in. \u0130lk olarak, yeni bir Node.js projesi olu\u015ftural\u0131m:<\/p>\n Dosya y\u00fckleme, listeleme ve silme i\u00e7in GraphQL \u015femas\u0131n\u0131 tan\u0131mlayal\u0131m. Burada: Resolvers, \u015femadaki sorgu ve mutasyonlar\u0131 ger\u00e7ek veri ve mant\u0131kla e\u015fle\u015ftirir. Dosya y\u00fckleme ve depolama i\u00e7in Not:<\/strong> Yukar\u0131daki Express uygulamas\u0131n\u0131 ve Apollo Server’\u0131 yap\u0131land\u0131ral\u0131m. Art\u0131k Vue CLI kullanarak yeni bir Vue projesi olu\u015ftural\u0131m:<\/p>\n Bir dosya y\u00fckleme bile\u015feni olu\u015ftural\u0131m. Bu bile\u015fen, bir dosya se\u00e7ici (\/upload<\/code>) \u00fczerinden bir multipart\/form-data<\/code> iste\u011fi ile yap\u0131l\u0131r. Dosya metadata’s\u0131 ayr\u0131 bir istek veya ayn\u0131 iste\u011fin bir par\u00e7as\u0131 olarak g\u00f6nderilebilir. Dosyalar\u0131 listelemek i\u00e7in ba\u015fka bir endpoint (\u00f6rn. \/files<\/code>) kullan\u0131l\u0131r ve genellikle t\u00fcm metadata seti geri d\u00f6ner.<\/p>\nGraphQL’in Avantajlar\u0131<\/h4>\n
\n* Veri A\u015f\u0131r\u0131 Getirme\/Az Getirme Sorunlar\u0131n\u0131n \u00d6nlenmesi:<\/strong> \u0130stemci sadece ihtiya\u00e7 duydu\u011fu dosya metadata alanlar\u0131n\u0131 sorgular. Bu, \u00f6zellikle \u00e7ok say\u0131da dosya listelenirken bant geni\u015fli\u011finden tasarruf sa\u011flar.
\n* G\u00fc\u00e7l\u00fc Tip Sistemi:<\/strong> GraphQL’in tip sistemi, dosya y\u00fckleme ve metadata y\u00f6netimi i\u00e7in net ve g\u00fcvenli bir API tan\u0131m\u0131 sunar. Bu, geli\u015ftirme s\u00fcrecini kolayla\u015ft\u0131r\u0131r ve hatalar\u0131 azalt\u0131r.
\n* Geli\u015ftirici Deneyimi:<\/strong> GraphQL ara\u00e7lar\u0131 (\u00f6rne\u011fin, GraphiQL, Apollo Studio) API’yi ke\u015ffetmeyi ve test etmeyi kolayla\u015ft\u0131r\u0131r.<\/p>\nTemel Teknolojiler<\/h3>\n
GraphQL<\/h4>\n
Vue.js<\/h4>\n
Arka U\u00e7 \u00c7er\u00e7evesi ve K\u00fct\u00fcphaneler<\/h4>\n
\n* Apollo Server:<\/strong> GraphQL sunucusunu uygulamak i\u00e7in.
\n* graphql-upload<\/code>:<\/strong> GraphQL ile dosya y\u00fcklemeyi desteklemek i\u00e7in standart bir \u00e7\u00f6z\u00fcm.
\n* multer<\/code> (iste\u011fe ba\u011fl\u0131, alternatif olarak fs<\/code> mod\u00fcl\u00fc):<\/strong> Dosyalar\u0131 sunucu taraf\u0131nda depolamak i\u00e7in.
\n* Veritaban\u0131 (MongoDB\/PostgreSQL):<\/strong> Dosyalar\u0131n metadata’s\u0131n\u0131 (ad\u0131, boyutu, t\u00fcr\u00fc, depolama yolu vb.) saklamak i\u00e7in. Bu makalede basitlik ad\u0131na yerel dosya sistemini ve bir veritaban\u0131 olmadan ilerleyebiliriz, ancak ger\u00e7ek d\u00fcnya uygulamalar\u0131nda veritaban\u0131 kullan\u0131m\u0131 kritik \u00f6neme sahiptir.<\/p>\n\u00d6n Y\u00fcz K\u00fct\u00fcphaneleri<\/h4>\n
\n* Apollo Client:<\/strong> Vue uygulamas\u0131ndan GraphQL API’sine istekler g\u00f6ndermek i\u00e7in.
\n* apollo-upload-client<\/code>:<\/strong> Apollo Client ile dosya y\u00fcklemeyi desteklemek i\u00e7in \u00f6zel bir ba\u011flant\u0131 (link).<\/p>\nArka U\u00e7 Uygulamas\u0131 (Node.js, Express, Apollo Server)<\/h3>\n
Proje Kurulumu<\/h4>\n
mkdir graphql-file-upload-backend\ncd graphql-file-upload-backend\nnpm init -y\nnpm install express apollo-server graphql graphql-upload\nnpm install --save-dev nodemon<\/code><\/pre>\npackage.json<\/code> dosyan\u0131za start<\/code> ve dev<\/code> script’lerini ekleyin:<\/p>\n\"scripts\": {\n \"start\": \"node src\/index.js\",\n \"dev\": \"nodemon src\/index.js\"\n}<\/code><\/pre>\nGraphQL \u015eema Tan\u0131m\u0131<\/h4>\n
Upload<\/code> scalar tipi graphql-upload<\/code> k\u00fct\u00fcphanesi taraf\u0131ndan sa\u011flan\u0131r ve dosya verilerini temsil eder.<\/p>\nsrc\/schema.js<\/code>:<\/p>\nconst { gql } = require('apollo-server-express');\n\nconst typeDefs = gql\n scalar Upload\n\n type File {\n id: ID!\n filename: String!\n mimetype: String!\n encoding: String!\n url: String!\n size: Float\n }\n\n type Query {\n hello: String\n files: [File!]!\n }\n\n type Mutation {\n singleUpload(file: Upload!): File!\n deleteFile(id: ID!): Boolean!\n }\n<\/code>;\n\nmodule.exports = typeDefs;<\/code><\/pre>\n
\n* Upload<\/code>: Dosya y\u00fcklemeleri i\u00e7in \u00f6zel bir scalar tip.
\n* File<\/code>: Y\u00fcklenen bir dosyan\u0131n metadata’s\u0131n\u0131 temsil eden bir tip. id<\/code>, filename<\/code>, mimetype<\/code>, encoding<\/code>, url<\/code> (dosyaya eri\u015fim yolu) ve size<\/code> (boyut) i\u00e7erir.
\n* Query<\/code>: files<\/code> sorgusu ile t\u00fcm y\u00fcklenen dosyalar\u0131 listeleriz.
\n* Mutation<\/code>:
\n * singleUpload<\/code>: Tek bir dosya y\u00fcklemek i\u00e7in kullan\u0131l\u0131r. Upload<\/code> tipinde bir file<\/code> arg\u00fcman\u0131 al\u0131r ve y\u00fcklenen dosyan\u0131n File<\/code> tipinde metadata’s\u0131n\u0131 d\u00f6ner.
\n * deleteFile<\/code>: Belirli bir dosyay\u0131 silmek i\u00e7in kullan\u0131l\u0131r. id<\/code> arg\u00fcman\u0131 al\u0131r ve i\u015flemin ba\u015far\u0131l\u0131 olup olmad\u0131\u011f\u0131n\u0131 belirten bir Boolean<\/code> d\u00f6ner.<\/p>\nResolvers Uygulamas\u0131<\/h4>\n
graphql-upload<\/code>‘dan gelen processUpload<\/code> fonksiyonunu kullanaca\u011f\u0131z. Dosyalar\u0131 yerel olarak uploads<\/code> dizinine kaydedece\u011fiz.<\/p>\nsrc\/resolvers.js<\/code>:<\/p>\nconst { GraphQLUpload } = require('graphql-upload');\nconst path = require('path');\nconst { createWriteStream, unlink } = require('fs');\nconst shortid = require('shortid');\n\n\/\/ Basit bir bellek i\u00e7i dosya deposu (ger\u00e7ek uygulamada veritaban\u0131 kullan\u0131lmal\u0131)\nconst files = [];\n\nconst storeUpload = async ({ stream, filename, mimetype, encoding }) => {\n const id = shortid.generate();\n const fileExtension = path.extname(filename);\n const newFilename = ${id}${fileExtension}<\/code>;\n const uploadDir = path.join(__dirname, '..\/uploads');\n const filePath = path.join(uploadDir, newFilename);\n const fileUrl = \/uploads\/${newFilename}<\/code>; \/\/ Frontend'den eri\u015fim i\u00e7in URL\n\n \/\/ Dosyay\u0131 diske yaz\n await new Promise((resolve, reject) =>\n stream\n .pipe(createWriteStream(filePath))\n .on('finish', resolve)\n .on('error', reject)\n );\n\n return { id, filename: newFilename, mimetype, encoding, url: fileUrl, filePath };\n};\n\nconst resolvers = {\n Upload: GraphQLUpload,\n\n Query: {\n hello: () => 'Merhaba GraphQL Dosya Y\u00fckleme!',\n files: () => files.map(file => ({ ...file, url: file.url })),\n },\n\n Mutation: {\n singleUpload: async (parent, { file }) => {\n const { createReadStream, filename, mimetype, encoding } = await file;\n const stream = createReadStream();\n const storedFile = await storeUpload({ stream, filename, mimetype, encoding });\n \n \/\/ Dosya boyutunu eklemek i\u00e7in stream'i yeniden okuyabiliriz veya ba\u015fka bir y\u00f6ntem kullanabiliriz.\n \/\/ Basitlik ad\u0131na burada boyut bilgisini atl\u0131yoruz veya varsay\u0131lan bir de\u011fer veriyoruz.\n \/\/ Ger\u00e7ek uygulamada dosya boyutunu dosya sisteminden okuyabilirsiniz.\n const stats = await new Promise((resolve, reject) => {\n fs.stat(storedFile.filePath, (err, stats) => {\n if (err) reject(err);\n resolve(stats);\n });\n });\n storedFile.size = stats.size;\n\n files.push(storedFile); \/\/ Bellek i\u00e7i depoya ekle\n return storedFile;\n },\n deleteFile: async (parent, { id }) => {\n const fileIndex = files.findIndex(f => f.id === id);\n if (fileIndex === -1) {\n return false; \/\/ Dosya bulunamad\u0131\n }\n const fileToDelete = files[fileIndex];\n\n \/\/ Yerel dosyay\u0131 sil\n await new Promise((resolve, reject) => {\n unlink(fileToDelete.filePath, (err) => {\n if (err) reject(err);\n resolve();\n });\n });\n\n files.splice(fileIndex, 1); \/\/ Bellek i\u00e7i depodan kald\u0131r\n return true;\n },\n },\n};\n\nmodule.exports = resolvers;<\/code><\/pre>\nfiles<\/code> dizisi, dosyalar\u0131n metadata’s\u0131n\u0131 bellekte tutan basit bir yap\u0131d\u0131r. Ger\u00e7ek bir uygulamada bu verileri bir veritaban\u0131nda (MongoDB, PostgreSQL vb.) saklaman\u0131z gerekir. filePath<\/code> alan\u0131, dosya silme i\u015flemi i\u00e7in gereklidir.<\/p>\nSunucu Kurulumu<\/h4>\n
graphql-upload<\/code>‘\u0131n middleware’ini Express’e eklemeyi unutmay\u0131n. Ayr\u0131ca, y\u00fcklenen dosyalar\u0131n sunulabilmesi i\u00e7in bir statik dosya sunucu middleware’i eklemeliyiz.<\/p>\nsrc\/index.js<\/code>:<\/p>\nconst express = require('express');\nconst { ApolloServer } = require('apollo-server-express');\nconst { graphqlUploadExpress } = require('graphql-upload');\nconst typeDefs = require('.\/schema');\nconst resolvers = require('.\/resolvers');\nconst path = require('path');\nconst fs = require('fs');\n\nasync function startApolloServer() {\n const app = express();\n\n \/\/ Y\u00fcklenen dosyalar\u0131n depolanaca\u011f\u0131 dizini olu\u015ftur\n const uploadDir = path.join(__dirname, '..\/uploads');\n if (!fs.existsSync(uploadDir)) {\n fs.mkdirSync(uploadDir);\n }\n\n \/\/ GraphQL dosya y\u00fckleme middleware'ini etkinle\u015ftir\n app.use(graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 })); \/\/ Maksimum 10MB dosya boyutu\n\n const server = new ApolloServer({\n typeDefs,\n resolvers,\n uploads: false, \/\/ graphqlUploadExpress zaten dosya i\u015fleme yap\u0131yor\n });\n\n await server.start();\n server.applyMiddleware({ app });\n\n \/\/ Y\u00fcklenen dosyalar\u0131 statik olarak sun\n app.use('\/uploads', express.static(uploadDir));\n\n const PORT = process.env.PORT || 4000;\n\n app.listen(PORT, () => {\n console.log( Sunucu http:\/\/localhost:${PORT}${server.graphqlPath} adresinde \u00e7al\u0131\u015f\u0131yor<\/code>);\n console.log( Dosyalar http:\/\/localhost:${PORT}\/uploads\/ adresinden eri\u015filebilir<\/code>);\n });\n}\n\nstartApolloServer();<\/code><\/pre>\nnpm run dev<\/code> komutu ile arka ucu \u00e7al\u0131\u015ft\u0131rabilirsiniz. Apollo Studio veya GraphiQL aray\u00fcz\u00fcnden sorgular\u0131n\u0131z\u0131 test edebilirsiniz.<\/p>\n\u00d6n Y\u00fcz Uygulamas\u0131 (Vue.js)<\/h3>\n
Vue Projesi Kurulumu<\/h4>\n
vue create graphql-file-upload-frontend\ncd graphql-file-upload-frontend\nnpm install vue-apollo graphql apollo-client apollo-link-http apollo-cache-inmemory apollo-upload-client graphql-tag<\/code><\/pre>\nGraphQL \u0130stemcisi Kurulumu<\/h4>\n
main.js<\/code> veya ayr\u0131 bir apollo.js<\/code> dosyas\u0131nda Apollo Client’\u0131 yap\u0131land\u0131rmam\u0131z gerekiyor. \u00d6zellikle apollo-upload-client<\/code>‘\u0131 kullanarak dosya y\u00fcklemeyi desteklemeliyiz.<\/p>\nsrc\/apollo.js<\/code>:<\/p>\nimport Vue from 'vue';\nimport VueApollo from 'vue-apollo';\nimport { ApolloClient } from 'apollo-client';\nimport { createHttpLink } from 'apollo-link-http';\nimport { InMemoryCache } from 'apollo-cache-inmemory';\nimport { createUploadLink } from 'apollo-upload-client';\n\nVue.use(VueApollo);\n\n\/\/ HTTP ba\u011flant\u0131s\u0131 olu\u015ftur (dosya y\u00fckleme i\u00e7in \u00f6zel link kullanaca\u011f\u0131z)\n\/\/ const httpLink = createHttpLink({\n\/\/ uri: 'http:\/\/localhost:4000\/graphql',\n\/\/ });\n\n\/\/ Dosya y\u00fckleme i\u00e7in \u00f6zel link olu\u015ftur\nconst uploadLink = createUploadLink({\n uri: 'http:\/\/localhost:4000\/graphql',\n});\n\n\/\/ Cache olu\u015ftur\nconst cache = new InMemoryCache();\n\n\/\/ Apollo Client \u00f6rne\u011fi olu\u015ftur\nconst apolloClient = new ApolloClient({\n link: uploadLink, \/\/ Dosya y\u00fckleme linkini kullan\n cache,\n});\n\nconst apolloProvider = new VueApollo({\n defaultClient: apolloClient,\n});\n\nexport default apolloProvider;<\/code><\/pre>\nsrc\/main.js<\/code>:<\/p>\nimport Vue from 'vue';\nimport App from '.\/App.vue';\nimport apolloProvider from '.\/apollo'; \/\/ Apollo sa\u011flay\u0131c\u0131s\u0131n\u0131 import et\n\nVue.config.productionTip = false;\n\nnew Vue({\n apolloProvider, \/\/ Apollo sa\u011flay\u0131c\u0131s\u0131n\u0131 Vue \u00f6rne\u011fine ekle\n render: h => h(App),\n}).$mount('#app');<\/code><\/pre>\nDosya Y\u00fckleme Bile\u015feni<\/h4>\n
<\/code>) ve bir y\u00fckleme d\u00fc\u011fmesi i\u00e7erecektir.<\/p>\nsrc\/components\/FileUpload.vue<\/code>:<\/p>\n\n Dosya Y\u00fckle<\/h2>\n \n