Apollo GraphQL ile Quasar çerçevesi

GraphQL'in Qausar çerçevesi ile çalışmasını istiyorsanız, bu makale tam size göre.

Ancak gerçek işe dalmadan önce, her iki teknolojinin de temellerini bilmelisiniz ve bunun için Quasar ve GraphQL hakkındaki önceki makalelerimi okumanızı tavsiye ederim .

Kullanacağımız paketler:

• Vue-Apollo
• Quasar Apollo Uygulama Uzantısı

Quasar Projesi'ni Vue-Apollo kullanacak şekilde ayarlama:

Quasar'ı kullanmak için, CLI'sini şu şekilde yüklemeniz gerekir:

$ yarn global add @quasar/cli
# or
$ npm install -g @quasar/cli

$ quasar create quasar-graphql-app

Tüm talimatları uyguladıktan sonra, o projeyi çalıştırmak için gerekli tüm paketlerin bulunduğu bir quasar projesine sahip olacaksınız.

GraphQL'i projenize entegre etme zamanı.

Quasar , çeşitli bağımlılıklara sahip kitaplıkları zahmetsizce enjekte etmek için çok güçlü bir Uygulama Uzantı Sistemi kullanır. Quasar için GraphQL ayrıca bir uzantı olarak da mevcuttur. Bu harika uzantıyı kullanarak projemize ekleyelim:

$ quasar ext add @quasar/apollo

Kurulum işlemini tamamlamak için sadece basit talimatları izleyin.

Bu arada, daha sonra herhangi bir noktada bu uzantıyı kullanarak da kaldırabilirsiniz:

$ quasar ext remove @quasar/apollo

Quasar Uygulamasını gqletiket kullanmak için etkinleştirin :

Vue-apollo bileşenlerinin kullanım gqletiketi yapmak için, özel bir dönüşümü açmanız gerekir, böylece vue-yükleyici bu yeni etiketlerde başarısız olmaz. Dosyanızdaki buildmülke aşağıdaki kodu ekleyin quasar.conf.js.

chainWebpack (chain, { isServer, isClient }) {
    chain.module.rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.transpileOptions = {
          transforms: {
            dangerousTaggedTemplateString: true
          }
        }
        return options
      })
  }

chain.module.rule('gql')
   .test(/\.(graphql|gql)$/)
   .use('graphql-tag/loader')
   .loader('graphql-tag/loader')

Projenin klasör yapısını fark ederseniz quasar.extensions.json, kök seviyesinde görmelisiniz . Bu, Quasar'a Apollo Uygulama Uzantısını yüklediğinizi söyler ve GraphQL API uç nokta URI'nizin girişini tutar.

{
  "@quasar/apollo": {
    "graphql_uri": "http://api.example.com"
  }
}

Apollo Client yapılandırma seçenekleri, uygulama başlatılmadan önce veya sonra işleme için olduğu gibi kancalar dosyasına özel kod eklerken yapılandırma dosyasındaki gereksinimlere göre eklenebilir.

Quasar projenizin apollo-graphql sunucunuza GraphQL sorguları ve mutasyonlar yapmaya hazır olması bu kadar. En iyi yanı, GraphQL'i kullanırken Vuex'e veya başka bir durum yönetimi kitaplığına ihtiyacınız olmamasıdır.

Yeni bir şey mi öğrendiniz? Yorumlar ve geri bildirimler yazarı her zaman mutlu eder. Mutlu kodlamalar!