React uygulamalarında GraphQL sorgularının kullanımı, veri yönetimi ve performans açısından birçok avantaj sunmaktadır GraphQL sorguları, verilerin düzenli bir şekilde alınmasını ve REST API'larına kıyasla daha az sayıda istekle daha fazla veri döndürülmesini sağlar Bu sayede, performans avantajı sağlanır ve uygulama daha hızlı ve etkilidir Query component kullanımı ile veri çekmek oldukça basit ve özelleştirilebilir hale gelirken, Mutation component ile de veri ekleme, silme ve güncelleme işlemleri yapılabilir Bu sayede, React uygulamalarının veri yönetimi ve kullanıcı arayüzünde gösterimi daha kolay hale gelir

GraphQL, Facebook tarafından geliştirilen bir veri sorgulama dilidir. Bu dil, bir RESTful API yerine tek bir API ile birden fazla kaynaktan veri almanıza ve yönetmenize olanak sağlar. Geleneksel API'lar aksine, GraphQL istemci tarafından belirlenen veri kümesine göre yanıtlar döndürür. Bu, istemcilerin yalnızca ihtiyaç duydukları verileri almasına izin verir, böylece ağ trafiği azaltılır ve uygulama daha hızlı ve etkilidir.

GraphQL, ayrıca eksiksiz bir belgeleme sistemine sahiptir. Bu, kullanıcıların kolayca veri şemalarını anlamalarını ve sorgularını en verimli şekilde nasıl yapacaklarını öğrenmelerini sağlar. API'de yapılan değişiklikler hakkında da anında bildirim yapar, böylece istemcilerin API'ye dokunmadan mevcut sorgularını iyileştirmeleri sağlanır. GraphQL, verileri farklı kaynaklardan çekmenizi ve herşeyi tek bir yerde birleştirmenizi, hem geliştirme hem de performans açısından kolay bir seçenek sunar.

React ve GraphQL'in birleşimi, modern web uygulamalarında veri yönetimini kolaylaştırmak için popüler hale geldi. React uygulamasında GraphQL sorgularının kullanımı, daha hızlı ve daha verimli veri iletişimi sunarak, performansı artırır.

Bir react uygulamasında GraphQL kullanımı, REST API'ların aksine daha düzenli bir şekilde veri alışverişi yapabilmenizi sağlar. Bunun yanı sıra, GraphQL sorguları, REST API'larına kıyasla daha az sayıda istekle daha fazla veri döndürebildiği için performans avantajı sunar. GraphQL, istemci tarafında daha az işleme sahip olduğu ve sadece gerektiği kadar veri sağladığı için cihazlar arası uyumluluğu da artırır.

Ayrıca, React uygulamanızda GraphQL kullanmak, veri yönetimini daha modüler hale getirir ve böylelikle kodunuzu daha okunaklı ve yeniden kullanılabilir kılar. Bu, uygulamanın geliştirilmesi ve yönetilmesinde daha az zaman ve çaba harcamanızı sağlar.

GraphQL sorgularının kullanılması, React uygulamanızın kullanıcı arayüzünde de avantaj sağlar. Örneğin, daha hızlı bir veri çekme işlemi sayesinde kullanıcı eylemlerine daha hızlı yanıt verebilirsiniz. Kullanıcı arayüzü geliştirirken, GraphQL sorguları temelinde veri yönetimi stratejiniz, uygulamanızın genişlemesine yardımcı olabilir.

Overall, React uygulamalarında GraphQL kullanımı, performans, veri yönetimi, modülerlik, yeniden kullanılabilirlik ve geliştirme sürecinde zaman ve çaba tasarrufu açısından birçok avantaj sunar.

Query Component Kullanımı

GraphQL veri sorgulama işlemlerinin React uygulamalarına dahil edilmesi ve kullanıcılara sunulması Query Component kullanımı ile oldukça kolay hale gelmektedir. Query component, GraphQL API'lerinden veri çekmek için kullanılan özelleştirilebilir bir React bileşenidir. Bu bileşen, GraphQL sorgularını ve sonuçlarını yönetmek ve kullanıcı arayüzünde görüntülemek için kullanılır.Query component kullanarak veri çekmek oldukça basittir. İlk olarak sorgunun yapılacağı API adresi belirtilir. Ardından sorgu için GraphQL dilinde yazılan belirli sorgular query propu içerisine yerleştirilir. Bu sorgular sonrası elde edilen veri render edilerek kullanıcı arayüzünde gösterilir.Örnek olarak, bir kitap listesi oluşturmak isteyelim. Bu kitap listesi için GraphQL API'sinden kitap isimleri ve yazarları çekmeliyiz. Bunun için oluşturacağımız query şu şekildedir:```graphqlquery { books { title author }}```Bu sorguyu Query componentine yerleştirerek elde edilen sonuçları alabiliriz. Alınan sonuçlar, bir HTML tablosunda ya da listesi şeklinde kullanıcı arayüzünde gösterilir.Örneğin, aşağıdaki kodda Query component kullanılarak bir kitap listesi oluşturulmuştur.```javascriptimport { gql, useQuery } from '@apollo/client';const BOOK_QUERY = gql` query { books { title author } }`;function BookList() { const { loading, error, data } = useQuery(BOOK_QUERY); if (loading) return

Loading...

; if (error) return

Error: {error.message}

; return (

{data.books.map((book) => (

• {book.title}

  {book.author}

))}

);}```Burada, useQuery hook'u kullanarak BOOK_QUERY sorgusunu yaparız. Bu sorgu sonucu elde edilen veriler, data değişkeninde saklanır. Daha sonra kitap listesini map işlemi ile oluşturur ve JSX olarak kullanıcı arayüzüne yansıtırız.Bu şekilde Query component kullanarak GraphQL sorguları yapmak oldukça basit ve etkilidir. GraphQL'in bu özelliği sayesinde React uygulamalarında verilerin yönetimi ve kullanıcı arayüzünde gösterilmesi daha kolay hale gelmektedir.

Mutation Component Kullanımı

Mutation component, GraphQL sorgularını kullanarak veri ekleme, silme ve güncelleme işlemlerini gerçekleştirmemizi sağlar. Bu component sayesinde, React uygulamamız ile GraphQL API arasındaki bağlantıyı kurarak istediğimiz veri değişikliklerini yapabiliriz.

Öncelikle, veri ekleme işlemi için Mutation component kullanımı örneği inceleyelim. Örneğin, bir blog uygulamamız olsun ve kullanıcılar yazı ekleyebilsin. GraphQL sorguları ile kullanıcının eklediği yazı veritabanına kaydedilebilir.

İlk olarak, Mutation component oluşturuyoruz ve içerisine gerekli sorguları yazıyoruz. Bu sorgular genellikle iki argüman alır: mutation ismi ve işlem yapılacak veriler. Örneğin, yeni bir yazı eklemek için şu sorguyu kullanabiliriz:

```const ADD_POST = gql` mutation addPost($title: String!, $content: String!) { addPost(title: $title, content: $content) { id title content date } }`;```

Bu sorgu, "addPost" adında bir mutation işlemi yapar ve "title" ve "content" argümanlarını alır. Bu argümanlar, kullanıcının girdiği başlık ve içerik bilgileridir. Veritabanına yeni eklenen yazının ID'si, başlık ve içeriği sorgunun sonucunda döndürülür.

Sonraki adımda, Mutation component'i kullanarak istekleri başlatırız. Bu işlemi yaparken "useMutation" hooks'unu kullanabiliriz. Şu şekilde bir örnek kullanım gösterilebilir:

```function AddPostForm() { const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const [addPost, { data }] = useMutation(ADD_POST);

const handleSubmit = (e) => { e.preventDefault(); addPost({ variables: { title, content } }); };

return (

setTitle(e.target.value)} /> setContent(e.target.value)} /> <button type="submit">Gönder</button> </form> );}```</p><p>Bu örnekte, "useMutation" hook'u ile ADD_POST mutation sorgusunu kullanarak veri eklemek için kullanılan formu oluşturuyoruz. Form submit edildiğinde, sorgu çalıştırılır ve veritabanına yeni yazı eklenir.</p><p>Mutation component ile veri silme veya güncelleme işlemi yapmak da çok benzer şekilde gerçekleştirilir. Gerekli mutation sorguları oluşturulur, "useMutation" hook'u kullanılarak bu sorguların çalıştırılması sağlanır. İşlem sonucunda dönen veriler de kullanıcı arayüzünde gösterilir.</p><p>Sonuç olarak, Mutation component ile GraphQL sorgularını kullanarak veri ekleme, silme veya güncelleme işlemlerini kolaylıkla gerçekleştirebiliriz. Bu sayede, React uygulamalarımızı daha işlevsel hale getirebilir ve veriler üzerinde tam kontrol sahibi olabiliriz.</p><br /><h4>Subscription Component Kullanımı</h4><p>GraphQL, modern bir veri sorgulama dilidir ve gerçek zamanlı veri yönetimi için de kullanılabilir. Bu yöntem, özellikle büyük, ağır web uygulamaları için oldukça faydalıdır. Subscription component kullanarak gerçek zamanlı GraphQL veri çekme işlemi de oldukça basittir.</p><p>Subscription component, Reactive Programming ile birleştirilerek kullanılabilen GraphQL'in bir parçasıdır. Bu sayede belirli bir kaynaktan hangi verilerin alınacağı belirlenir ve o kaynak üzerinde yapılan her değişiklik anında dinlenir. Bu sayede uygulamada gerçek zamanlı değişiklikler anında görüntülenebilir. Verilerin alınması için subscription sorgusu kullanılarak belirli bir kaynağa abone olunur ve o kaynakta yapılan her değişiklik anında bu veriler güncellenir. </p><table> <tr> <th>Avantajları</th> <th>Dezavantajları</th> </tr> <tr> <td>Gerçek zamanlı veri güncellemelerini anında görüntüleme imkanı sağlar.</td> <td>Yüksek trafikli uygulamalarda aşırı yüklenmeye yol açabilir.</td> </tr> <tr> <td>Verileri sürekli olarak çekmek yerine, kaynaktaki değişiklikleri doğrudan almaya olanak sağlar.</td> <td>Uygulamanın abone olduğu kaynağın sunucuda çalışıyor olması gereklidir.</td> </tr> <tr> <td>Kullanıcı deneyimini iyileştirir.</td> <td>Subscription işlemleri, bazı veritabanları ya da sunucular için uygulanabilir değildir.</td> </tr></table><p>React- Apollo ile birlikte kullanıldığında subscription component, özellikle gerçek zamanlı uygulamalarda kullanılabilecek güçlü bir araçtır. Subscription component ile gerçek zamanlı veri güncellemeleri, uygulamanın kullanıcı deneyimini ve performansını arttırır. Bu nedenle subscription kullanarak gerçek zamanlı veri çekme, React uygulamalarının geliştirilmesinde oldukça faydalıdır.</p><p>React, Facebook tarafından geliştirilen bir JavaScript kütüphanesidir ve kullanıcı arayüzlerinin oluşturulmasını sağlar. GraphQL ile entegrasyon da oldukça kolaydır. Ancak GraphQL sorgularının yönetimi için bir istemci gerekmektedir.</p><p>Bu istemci aracılığıyla, sorguların nasıl yapılacağı ve sonuçların nasıl işleneceği tanımlanır. Bu noktada, React kullanıcıları için en popüler seçeneklerden biri olan React-Apollo devreye girer. React-Apollo kullanarak GraphQL sorgularının nasıl yönetileceği ve context kullanım örnekleri şu şekildedir:</p><p>Apollo client, GraphQL sorgularının istemci tarafında yönetilmesine olanak sağlayan bir JavaScript kütüphanesidir. Kullanıma başlamak için, öncelikle Apollo Client'ı kurmanız gereklidir. Kurulum işlemi oldukça basittir ve aşağıdaki kod ile gerçekleştirilir:</p><pre><code>npm install apollo-boost graphql react-apollo</code></pre><p>Bu işlemin ardından, Apollo Client'ı kullanmak için gerekli ayarlamaları yapmanız gereklidir.</p><p>Query component, Apollo istemcisi üzerinde GraphQL sorgularının yapılmasına olanak sağlayan bir React bileşenidir. Örneğin, bir kitap listesi uygulaması için GraphQL'de aşağıdaki sorguyu yazabilirsiniz:</p><pre><code>query{ books { title author } }</code></pre><p>Query componentini kullanarak, kitapların GraphQL'den nasıl alınacağını belirtirsiniz ve sonuçları kullanıcı arayüzünde render edersiniz. Aşağıdaki kod örneği, React-Apollo kullanarak GraphQL'den bir kitap listesi almak için nasıl kullanır:</p><pre><code>import gql from 'graphql-tag'; import { Query } from 'react-apollo'; const BooksList = () => (<Query query={gql`{ books { title author } }`} >{({loading,error,data}) => { if (loading) return 'Loading...'; if (error) return {'Error'}; return( {data.books.map(({title, author}) => ({title} - {author}))}); }}</Query>);</code></pre><p>Yukarıdaki kodda yer alan <code>Query</code> bileşeni, GraphQL sorgusunun yapıldığı yerdir. Sorgunun sonucu, <code>(loading, error, data)</code> şeklinde geri döner. Sonuç, <code>loading</code> ve <code>error</code> durumlarına göre ele alınır ve sorun yoksa sonuç verileri kullanıcı arayüzünde render edilir.</p><p>Mutation component, Apollo istemcisi üzerinde GraphQL sorguları yaparak veri ekleme, silme ve güncelleme işlemleri gerçekleştirebilirsiniz. Aşağıdaki kod örneği, React-Apollo kullanarak GraphQL sorgusu yaparak yeni bir kitap eklemek için nasıl kullanılır:</p><pre><code>import gql from 'graphql-tag'; import { Mutation } from 'react-apollo'; const AddBook = () => { let titleInput; let authorInput; return ( Eklenen Kitap BilgileriEklemek İstediğiniz Kitap Bilgilerini Girin:Title: Author: ); };</code></pre><p>Yukarıdaki kodda, sorgunun nereye yapılacağı belirtilir ve sonuçları kullanıcı arayüzünde render edilir.</p><p>Subscription component, WebSocket aracılığıyla gerçek zamanlı GraphQL veri çekmeye olanak sağlar. Bu bileşenle, sunucudan gelen değişiklikleri anında alabilir ve kullanıcı arayüzünde görüntüleyebilirsiniz. Aşağıdaki kod örneği, React-Apollo kullanarak gerçek zamanlı bir GraphQL veri akışı için nasıl kullanılır:</p><pre><code>import gql from 'graphql-tag'; import { Subscription } from 'react-apollo'; const BooksStream = () => (<Subscription subscription={gql `{ booksStream {title author} }`} >{({data, loading}) => { if (loading) return 'Loading...' return ({data.booksStream.title} - {data.booksStream.author}); }}</Subscription>);</code></pre><p>Yukarıdaki kodda, <code>Subscription</code> bileşeni ile GraphQL üzerinde gerçek zamanlı bir akışı izlersiniz. Sonuçlar, WebSocket aracılığıyla döner ve kullanıcı arayüzünde anında görüntülenir.</p><p>Tüm bu örnekler, React-Apollo kullanarak, GraphQL sorgularının nasıl yönetilebileceğini göstermektedir. İstemci tarafında yapılan sorguların etkin bir şekilde kullanılması, uygulamanın performansını ve verimliliğini artıracaktır.</p><br /><h4>Apollo Client Kurulumu</h4><p>Apollo Client, GraphQL sorgularımızı yönetmenin en popüler yoludur. Bu yazılım bileşeni bize, GraphQL sunucusundan veri almak için gerekli işlemleri yönetme kolaylığı sunar. Apollo Client kurulumu oldukça basittir ve sadece birkaç adım gerektirir.</p><p>İlk olarak, React projesimize Apollo Client'ı eklemek için aşağıdaki komutu kullanarak npm veya yarn paket yöneticimizi kullanarak Apollo Client'ı eklemeliyiz:</p><pre>npm install apollo-boost react-apollo graphql --save</pre><p>Bundan sonra, ApolloProvider bileşenini kullanarak uygulamanın her yerinde kullanılabilir hale getirmeliyiz. Bu bileşen, Apollo Client'ın sağlanması için gerekli yapılandırmayı paylaşır. Örneğin:</p><table> <tr> <th>import</th> <th>{ApolloProvider}</th> <th>from</th> <th>'react-apollo'</th> <th>;</th> </tr> <tr> <td>import</td> <td>client</td> <td>from</td> <td>'./client'</td> <td>;</td> </tr> <tr> <td>ReactDOM.render</td> <td>(</td> <td><ApolloProvider client={client}></td> <td><App /></td> <td></ApolloProvider></td> </tr></table><p>Yukarıdaki örnekte, Apollo Client’ın nasıl kullanılacağı gösteriliyor. ApolloProvider bileşenini, React uygulamamızla birlikte kullanabiliriz ve bir client örneği sağlamalıyız. Bu örneğin, Apollo Client ile ayarlandığından emin olmamız gerekiyor.</p><p>Ayrıca, Apollo Client ile GraphQL sunucusuna sorgu gönderebilmek için, sunucunun URL'sini özelleştirerek bir HTTP bağlantısı oluşturmamız gerekiyor. Bunu yapmak için, ApolloClient yöntemini kullanarak bir örnek oluşturmalı ve gerekli ayarlamaları yapmalıyız. Örneğin:</p><table> <tr> <th>import</th> <th>{ApolloClient}</th> <th>from</th> <th>'apollo-client'</th> <th>;</th> </tr> <tr> <td>import</td> <td>{InMemoryCache}</td> <td>from</td> <td>'apollo-cache-inmemory'</td> <td>;</td> </tr> <tr> <td>import</td> <td>{HttpLink}</td> <td>from</td> <td>'apollo-link-http'</td> <td>;</td> </tr></table><p>Yukarıdaki örnekte, Apollo Client'ı yapılandırmak için gerekli olan üç paketi yükledik. Şimdi ApolloClient yöntemini kullanarak, önceden oluşturduğumuz HTTP bağlantımızı ekleyebiliriz:</p><pre>const httpLink = new HttpLink({ uri: 'http://localhost:4000/graphql'})</pre><p>Ardından, InMemoryCache örneğimizi oluşturmalı ve ApolloClient örneğinin parametreleri olarak eklemeliyiz. Örneğin:</p><pre>const cache = new InMemoryCache()const client = new ApolloClient({ link: httpLink, cache})</pre><p>Son olarak, oluşturduğumuz Apollo Client örneğini tüm uygulamada kullanılabilir hale getirmek için, önceki örnekteki gibi, ApolloProvider bileşenine eklememiz gerekiyor:</p><pre>ReactDOM.render( <ApolloProvider client={client}> <App /> </ApolloProvider>, document.getElementById('root'))</pre><p>Yukarıdaki adımları takip ederek, Apollo Client'ı uygulamanıza kolayca ekleyebilirsiniz. Artık, GraphQL sunucusuna sorgu göndermek için Apollo Client kullanabilirsiniz.</p><br /><h4>Query Component Kullanımı</h4><p>GraphQL sorgularını React uygulamamızda kullanmanın en pratik yolu, Apollo Client'ın Query component'ını kullanmaktır. Query component, komponentimizde nasıl bir sorgu yapacağımızı belirlememize ve sorgumuzun sonucunun uygulama içinde nasıl gösterileceğini tanımlamamıza olanak tanır.</p><p>Örnek olarak, bir kitap listesi uygulaması düşünelim ve bu uygulamada, tüm kitapların listesi görüntülenebilecek şekilde bir sorgu yapmamız gerekiyor. Bu sorguyu Apollo Client'ın Query component'ı ile şu şekilde yapabiliriz:</p><table> <tr> <th>Sorgu</th> <th>Sonuç</th> </tr> <tr> <td> <pre>const ALL_BOOKS_QUERY = gql` query { books { title author } }`; </pre> </td> <td>{"data": {"books": [{"title": "Harry Potter", "author": "J.K. Rowling"}, {"title": "Lord of the Rings", "author": "J.R.R. Tolkien"}]}}</td> </tr></table><p>Bu örnekte ALL_BOOKS_QUERY, kitapların listesini almak için kullanılan bir GraphQL sorgusudur. Sorgunun sonucu, books alanındaki verileri içeren bir JSON nesnesi olarak alınır. Bu sonucu kullanarak uygulamamızda kitapların listesini gösterebiliriz. </p><br /><h4>Mutation Component Kullanımı</h4><p>Mutation Component, Apollo Client kullanarak GraphQL sorguları yaparak, veri ekleme, silme veya güncellemeye imkan tanır. Bu örnekle, Apollo Client kullanarak nasıl veri güncelleyebileceğimizi anlayabiliriz. Belli bir kaydı güncellemek için, "Mutation" isimli bir query oluşturmamız gerekiyor. Şimdi, bu işlemi gerçekleştirmek için gerekli kodları inceleyelim:</p><p>```jsimport { Mutation } from 'react-apollo';import gql from 'graphql-tag';</p><p>const UPDATE_POST = gql` mutation UpdatePost($id: ID!, $title: String!, $content: String!) { updatePost(id: $id, title: $title, content: $content) { id } }`;</p><p><Mutation mutation={UPDATE_POST}> {(updatePost, { data }) => ( <div> <form onSubmit={e => { e.preventDefault(); updatePost({ variables: { id: postId, title: this.state.title, content: this.state.content, }, }); }} > <input type="text" placeholder="Başlık" value={this.state.title} onChange={e => this.setState({ title: e.target.value })} /> <textarea placeholder="Gönderi içeriği" value={this.state.content} onChange={e => this.setState({ content: e.target.value })} /> <button type="submit">Gönderiyi Güncelle</button> </form> </div> )}</Mutation>```</p><p>Yukarıdaki kod örneği, "Mutation" adında bir query tanımlar ve bu query'e id, title ve content parametreleri ekler. Bu query, güncelleme işlemini gerçekleştirir. Yeni verileri almak için variables objesi kullanılarak, onSubmit fonksiyonundaki gereksinimleri güncelleyebilirsiniz. Bu örnekte, bir form oluşturulur ve değişikliklerin kaydedilmesi için bir buton eklenir. Bu örneği inceleyerek, herhangi bir veritabanına kaydedilen verileri nasıl güncelleyebileceğinizi öğrenin.</p><br /><h4>Subscription Component Kullanımı</h4><p>GraphQL, modern bir API teknolojisi olarak, web uygulamalarında verimli bir şekilde veri işleme yöntemi sunmak için kullanılmaktadır. React gibi popüler bir framework ile birleştirildiğinde, konforlu bir veri işleme ortamı mümkün olmaktadır. Subscription component kullanımı, gerçek zamanlı veri çekmek için kullanılan bir yöntemdir ve React- Apollo kullanarak bu işlem oldukça kolaylaşmaktadır.</p><p>Subscription component kullanımı, kullanıcı etkileşimi olmadan, belirli bir olay gerçekleştikçe verileri anında sunmaktadır. Özellikle, web uygulamalarında anlık etkileşim gerektiren işlemler gerçekleştirmek için kullanılan oldukça önemli bir yöntemdir. Subscription, kullanıcının bir olaya şart bağlı abone olduğu ve ilgili olay gerçekleştiği anda anında bildirimler alındığı bir yapıdır.</p><p>Apollo client kullanımı ile Subscription component sayesinde gerçek zamanlı veri çekme işlemi kolaylaşmaktadır. Apollo client, GraphQL sorgularını yönetmek için kullanılıyor ve özellikle modern web uygulamalarındaki state yönetimi için oldukça kullanışlıdır.</p><p>Subscriptions, bir GraphQL şemasında tanımlanan bir alanı takip etmek için kullanılan bir araçtır. Apollo klient ile Subscription kullanmak istediğimizde, Apollo tarafından sağlanan **subscribeToMore** işlevini kullanarak, bir abonelik setTimeout işlevleriyle ilişkilendirilebilir. Bu sayede, abonelik işlevi kullanıcının isteği mümkün olduğunda otomatik olarak sonlandırılabilir ve veri işleme esnasında hatanın önüne geçilmiş olur.</p><p>Bu sayede, Subscription component ile uygulama içinde, gerçek zamanlı bildirimler ya da verilerin paylaşımı gibi işlemler gerçekleştirilebilir. Sadece bir kaç satırlık kod eklenerek, gerçek zamanlı bir kullanıcı deneyimi mümkün olmaktadır.</p></p> </div> <div class="entry-footer"> <div class="post-tags"><span class="entry-footer__title">Etiketler:</span> <ul class="list-tags list-tags_grey list-unstyled"> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="GraphQL" href="arama-sonuclari.html?mod=4&ara=GraphQL">GraphQL</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="Facebook" href="arama-sonuclari.html?mod=4&ara=Facebook">Facebook</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="veri sorgulama dili" href="arama-sonuclari.html?mod=4&ara=veri+sorgulama+dili">veri sorgulama dili</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="RESTful API" href="arama-sonuclari.html?mod=4&ara=RESTful+API">RESTful API</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="veri yönetimi" href="arama-sonuclari.html?mod=4&ara=veri+yönetimi">veri yönetimi</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="belgeleme sistemi" href="arama-sonuclari.html?mod=4&ara=belgeleme+sistemi">belgeleme sistemi</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="değişiklik bildirimleri" href="arama-sonuclari.html?mod=4&ara=değişiklik+bildirimleri">değişiklik bildirimleri</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="veri birleştirme" href="arama-sonuclari.html?mod=4&ara=veri+birleştirme">veri birleştirme</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="React" href="arama-sonuclari.html?mod=4&ara=React">React</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="veri iletişimi" href="arama-sonuclari.html?mod=4&ara=veri+iletişimi">veri iletişimi</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="veri alışverişi" href="arama-sonuclari.html?mod=4&ara=veri+alışverişi">veri alışverişi</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="performans avantajı" href="arama-sonuclari.html?mod=4&ara=performans+avantajı">performans avantajı</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="modülerlik" href="arama-sonuclari.html?mod=4&ara=modülerlik">modülerlik</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="yeniden kullanılabilirlik" href="arama-sonuclari.html?mod=4&ara=yeniden+kullanılabilirlik">yeniden kullanılabilirlik</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="zaman ve çaba tasarrufu" href="arama-sonuclari.html?mod=4&ara=zaman+ve+çaba+tasarrufu">zaman ve çaba tasarrufu</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="Query Component" href="arama-sonuclari.html?mod=4&ara=Query+Component">Query Component</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="özelleştirilebilir" href="arama-sonuclari.html?mod=4&ara=özelleştirilebilir">özelleştirilebilir</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="veri çekme" href="arama-sonuclari.html?mod=4&ara=veri+çekme">veri çekme</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="API adresi" href="arama-sonuclari.html?mod=4&ara=API+adresi">API adresi</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="sorgu propu" href="arama-sonuclari.html?mod=4&ara=sorgu+propu">sorgu propu</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="elde edilen veri" href="arama-sonuclari.html?mod=4&ara=elde+edilen+veri">elde edilen veri</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="kullanıcı arayüzü" href="arama-sonuclari.html?mod=4&ara=kullanıcı+arayüzü">kullanıcı arayüzü</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="kitap listesi örneği" href="arama-sonuclari.html?mod=4&ara=kitap+listesi+örneği">kitap listesi örneği</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="useQuery hook'u" href="arama-sonuclari.html?mod=4&ara=useQuery+hook'u">useQuery hook'u</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="BOOK_QUERY sorgusu" href="arama-sonuclari.html?mod=4&ara=BOOK_QUERY+sorgusu">BOOK_QUERY sorgusu</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="data değişkeni" href="arama-sonuclari.html?mod=4&ara=data+değişkeni">data değişkeni</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="map işlemi" href="arama-sonuclari.html?mod=4&ara=map+işlemi">map işlemi</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="JSX" href="arama-sonuclari.html?mod=4&ara=JSX">JSX</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="Mutation Component" href="arama-sonuclari.html?mod=4&ara=Mutation+Component">Mutation Component</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="veri ekleme" href="arama-sonuclari.html?mod=4&ara=veri+ekleme">veri ekleme</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="veritabanı" href="arama-sonuclari.html?mod=4&ara=veritabanı">veritabanı</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="mutation ismi" href="arama-sonuclari.html?mod=4&ara=mutation+ismi">mutation ismi</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="addPost fonksiyonu" href="arama-sonuclari.html?mod=4&ara=addPost+fonksiyonu">addPost fonksiyonu</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="argümanlar" href="arama-sonuclari.html?mod=4&ara=argümanlar">argümanlar</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="React-Apollo Kullanım" href="arama-sonuclari.html?mod=4&ara=React-Apollo+Kullanım">React-Apollo Kullanım</a></li> </ul> </div> </div> </div> </article> <!-- end .post--> <!-- end .section-comment--> <!-- end .section-reply-form--> </div> </div> </div> <div class="col-md-4"> <aside class="l-sidebar col_mrg-left_20"> <section class="widget section-sidebar"> <h2 class="widget-title ui-title-inner ui-title-inner_condensed"><span class="ui-title-inner__inner">Kategoriler</span></h2> <div class="widget-content"> <ul class="widget-list list list-mark-4"> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-935149-Web-Yazilim-Eticaret.html">Web - Yazılım - Eticaret</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-224447-Tip-Saglik.html">Tıp & Sağlık</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-609805-Evren-Yaratilis-Varolus.html">Evren & Yaratılış & Varoluş</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-640669-Teknolojiler.html">Teknolojiler</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-903149-Fizik-Kimya-Biyoloji.html">Fizik & Kimya & Biyoloji</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-700485-Spor.html">Spor</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-190961-Egitim.html">Eğitim</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-253601-Danismanlik.html">Danışmanlık</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-618323-Psikoloji-Psikiyatri.html">Psikoloji & Psikiyatri</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-358242-Muhendislik.html">Mühendislik</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-468393-Kodlama-Yazilim-Dilleri.html">Kodlama - Yazılım Dilleri</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-175853-Arsa-Emlak-Insaat.html">Arsa & Emlak & İnşaat</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-153043-Kahve-Yemek-Mutfak.html">Kahve & Yemek & Mutfak</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-637540-Tarih-Sosyal-Bilimler.html">Tarih & Sosyal Bilimler</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-605539-Genel-Kultur.html">Genel Kültür</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-362240-Astroloji.html">Astroloji</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-561991-Icatlar.html">İcatlar</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-482698-Yurtdisi-Egitim-Is-Yatirim.html">Yurtdışı Eğitim - İş - Yatırım</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-368835-Meslekler.html">Meslekler</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-560367-Bilim-Insanlari.html">Bilim İnsanları</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-849471-Sanat-Dallari.html">Sanat Dalları</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-645345-Pazaryerleri.html">Pazaryerleri</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-343966-Sosyal-Medya.html">Sosyal Medya</a></li> </ul> </div> </section> <!-- end .widget--> <div class="widget"><!-- end .b-banner--> </div> <!-- end .widget--> </aside> </div> </div> </div> </div> </div> <footer class="footer"> <!-- <div class="footer__main"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="footer-section"><a class="footer__logo" href="home.html"><img class="img-responsive" src="temalar/infoldia/assets/media/general/logo-footer.png" alt="Logo"/></a> <div class="footer__info"> <p>Lorem ipsum dolor amet consecteu adipisicing sed do eiusmod tempor incididunt labore dolore magna aliqua enimad minim tempor incididunt labore et dolore magna aliqua.</p> </div> <div class="footer__contact"><i class="icon fa fa-location-arrow"></i> 36 Canal Society, Victoria ML 00789</div> <div class="footer__contact"><i class="icon fa fa-phone"></i> +01 234 5678 / 0800 123.9876</div> <div class="footer__contact"><i class="icon fa fa-envelope"></i> contact@domain.com</div> <ul class="social-net list-inline"> <li class="social-net__item"><a class="social-net__link text-primary_h" href="twitter.html"><i class="icon fa fa-twitter"></i></a></li> <li class="social-net__item"><a class="social-net__link text-primary_h" href="facebook.html"><i class="icon fa fa-facebook"></i></a></li> <li class="social-net__item"><a class="social-net__link text-primary_h" href="plus.google.html"><i class="icon fa fa-google-plus"></i></a></li> <li class="social-net__item"><a class="social-net__link text-primary_h" href="youtube-play.html"><i class="icon fa fa-youtube-play"></i></a></li> <li class="social-net__item"><a class="social-net__link text-primary_h" href="rss.html"><i class="icon fa fa-rss"></i></a></li> </ul> </div> </div> <div class="col-md-4"> <section class="footer-section"> <h3 class="footer-section__title ui-title-inner ui-title-inner_condensed"><span class="ui-title-inner__inner">recent posts</span></h3> <section class="b-post b-post_img-left b-post_light b-post_img-100 clearfix"> <div class="entry-media"><a class="js-zoom-images img-hover-effect" href="temalar/infoldia/assets/media/content/posts/100x80/1.jpg"><img class="img-responsive hov-scal" src="temalar/infoldia/assets/media/content/posts/100x80/1.jpg" alt="Foto"/></a></div> <div class="entry-main"> <div class="entry-header"> <h2 class="entry-title"><a href="blog-post.html">Equip exea comodas rue nsew uat duis ipsum</a></h2> <div class="entry-meta"><span class="entry-meta__item"><a class="entry-meta__link" href="blog-main.html"><strong>march 8, 2017</strong></a></span><span class="entry-meta__item"><i class="icon fa fa-comment-o text-primary"></i><a class="entry-meta__link" href="blog-main.html">29</a></span> </div> </div> </div> </section> <section class="b-post b-post_img-left b-post_light b-post_img-100 clearfix"> <div class="entry-media"><a class="js-zoom-images img-hover-effect" href="temalar/infoldia/assets/media/content/posts/100x80/2.jpg"><img class="img-responsive hov-scal" src="temalar/infoldia/assets/media/content/posts/100x80/2.jpg" alt="Foto"/></a></div> <div class="entry-main"> <div class="entry-header"> <h2 class="entry-title"><a href="blog-post.html">Lorem ipsum dolor sit do amet elit spa eiusmod</a></h2> <div class="entry-meta"><span class="entry-meta__item"><a class="entry-meta__link" href="blog-main.html"><strong>june 30, 2017</strong></a></span><span class="entry-meta__item"><i class="icon fa fa-comment-o text-primary"></i><a class="entry-meta__link" href="blog-main.html">14</a></span> </div> </div> </div> </section> <section class="b-post b-post_img-left b-post_light b-post_img-100 clearfix"> <div class="entry-media"><a class="js-zoom-images img-hover-effect" href="temalar/infoldia/assets/media/content/posts/100x80/3.jpg"><img class="img-responsive hov-scal" src="temalar/infoldia/assets/media/content/posts/100x80/3.jpg" alt="Foto"/></a></div> <div class="entry-main"> <div class="entry-header"> <h2 class="entry-title"><a href="blog-post.html">Exercitation ullamco ca laboris nisi ut aliquip ex ea</a></h2> <div class="entry-meta"><span class="entry-meta__item"><a class="entry-meta__link" href="blog-main.html"><strong>august 25, 2017</strong></a></span><span class="entry-meta__item"><i class="icon fa fa-comment-o text-primary"></i><a class="entry-meta__link" href="blog-main.html">14</a></span> </div> </div> </div> </section> </section> </div> <div class="col-md-4"> <section class="footer-section"> <h3 class="footer-section__title ui-title-inner ui-title-inner_condensed"><span class="ui-title-inner__inner">Latest images</span></h3> <div class="owl-carousel owl-theme owl-theme_control-center owl-theme_control-dark enable-owl-carousel" data-pagination="false" data-navigation="true" data-single-item="true" data-auto-play="7000" data-transition-style="fade" data-main-text-animation="true" data-after-init-delay="3000" data-after-move-delay="1000" data-stop-on-hover="true"><img src="temalar/infoldia/assets/media/content/gallery/360x300_1.jpg" alt="foto"/><img src="temalar/infoldia/assets/media/content/gallery/360x300_1.jpg" alt="foto"/><img src="temalar/infoldia/assets/media/content/gallery/360x300_1.jpg" alt="foto"/></div> </section> </div> </div> </div> </div> --> <div class="copyright"> <div class="container"> <div class="row"> <div class="col-xs-12"> <ul class="copyright-list list-inline"> <li class="copyright-list__item"><a class="copyright-list__link" href="kosullar.html">Kullanım Koşulları</a></li> <li class="copyright-list__item"><a class="copyright-list__link" href="gizlilik.html">Gizlilik & Güvenlik</a></li> <li class="copyright-list__item"><a class="copyright-list__link" href="iletisim.html">İletişim</a></li> </ul><span class="copyright__info">© 2024<strong> INFOLDIA</strong> ® Tüm Hakları Saklıdır</span> </div> </div> </div> </div> </footer> </div> <!-- end layout-theme--> <!-- ++++++++++++--> <!-- MAIN SCRIPTS--> <!-- ++++++++++++--> <script src="temalar/infoldia/assets/libs/jquery-1.12.4.min.js"></script> <script src="temalar/infoldia/assets/libs/jquery-migrate-1.2.1.js"></script> <script src="temalar/infoldia/assets/libs/modernizr.custom.js"></script> <!-- Bootstrap--> <script src="temalar/infoldia/assets/libs/bootstrap/bootstrap.min.js"></script> <!-- User customization--> <script src="temalar/infoldia/assets/js/custom.js"></script> <!-- Slider--> <script src="temalar/infoldia/assets/plugins/owl-carousel/owl.carousel.min.js"></script> <!-- Pop-up window--> <script src="temalar/infoldia/assets/plugins/magnific-popup/jquery.magnific-popup.min.js"></script> <!-- Headers scripts--> <script src="temalar/infoldia/assets/plugins/headers/jquery.dlmenu.js"></script> <script src="temalar/infoldia/assets/plugins/headers/slidebar.js"></script> <script src="temalar/infoldia/assets/plugins/headers/header.js"></script> <!-- Mail scripts--> <script src="temalar/infoldia/assets/plugins/jqBootstrapValidation.js"></script> <!-- Video player--> <script src="temalar/infoldia/assets/plugins/flowplayer/flowplayer.min.js"></script> <!-- Filter and sorting images--> <script src="temalar/infoldia/assets/plugins/isotope/isotope.pkgd.min.js"></script> <script src="temalar/infoldia/assets/plugins/isotope/imagesLoaded.js"></script> <!-- Progress numbers--> <script src="temalar/infoldia/assets/plugins/rendro-easy-pie-chart/jquery.easypiechart.min.js"></script> <script src="temalar/infoldia/assets/plugins/rendro-easy-pie-chart/waypoints.min.js"></script> <!-- Animations--> <script src="temalar/infoldia/assets/plugins/scrollreveal/scrollreveal.min.js"></script> <!-- Ticker--> <script src="temalar/infoldia/assets/plugins/jquery-easy-ticker/jquery.easy-ticker.min.js"></script> </body> </html>