Cara Menggunakan Graphql dengan Pelanggan Vue dan Apollo

Pasang klien Apollo dan pakej ketergantungan yang berkaitan dan konfigurasikan pelanggan mengikut Vue 2 atau VUE 3; 2. Menyediakan contoh pelanggan dalam Vue 3 melalui Provideapolloclient, dan gunakan pemalam Vueapollo di Vue 2; 3. Gunakan API gabungan UseQuery dan Usemutation untuk memulakan pertanyaan dan perubahan komponen; 4. Gunakan pembolehubah dan refetch untuk mencapai pengambilalihan data dinamik dan menyegarkan, kemas kini pengundian pilihan; 5. Menggunakan keadaan pemuatan dan kesilapan untuk mengoptimumkan pengalaman pengguna, menggabungkan ketegangan atau anti-goncang untuk meningkatkan kefasihan interaksi; 6. Tambah maklumat pengesahan melalui tajuk pautan HTTP, gunakan cache, serpihan dan fail pertanyaan untuk mengatur untuk meningkatkan prestasi aplikasi dan penyelenggaraan, dan akhirnya mencapai pemerolehan data yang cekap dan deklaratif, dan lengkap.

Menggunakan GraphQL dengan pelanggan Vue dan Apollo adalah cara yang kuat untuk membina aplikasi yang didorong oleh data moden. Ia membolehkan anda mengambil dengan tepat data yang anda perlukan dari backend anda, mengurangkan prestasi yang lebih baik dan meningkatkan prestasi. Berikut adalah cara untuk menetapkannya dan menggunakannya dengan berkesan dalam projek VUE.

Sediakan pelanggan Apollo di Vue

Langkah pertama ialah memasang dan mengkonfigurasi klien Apollo dalam aplikasi VUE anda. Persediaan ini berfungsi untuk kedua -dua Vue 2 dan Vue 3, walaupun perbezaan sintaks sedikit.

Pasang pakej yang diperlukan:

 NPM Install @Apollo/Client Graphql
NPM Pasang @Vue/Apollo-Composable # untuk Vue 3
# Atau untuk Vue 2:
NPM Pasang Vue-Apollo Apollo-Boost

Untuk Vue 3 , buat contoh ApolloClient dan gunakan provide dalam persediaan aplikasi anda:

 // apolloclient.js
Import {Apolloclient, InMemoryCache, CreateHttplink} dari '@Apollo/Client/Core'

const httplink = createHttPlink ({
  Uri: 'https://your-graphql-api.com/graphql', // Ganti dengan titik akhir anda
})

Const Cache = InMemoryCache baru ()

const apolloclient = baru apolloclient ({
  Pautan: httplink,
  Cache,
})

Eksport lalai Apolloclient

Kemudian, berikan pelanggan di main.js anda:

 // main.js
import {createApp} dari 'vue'
import {menyediakan: provideapolloclient} dari '@vue/apollo-composable'
import apolloclient dari './apolloclient'
aplikasi import dari './app.vue'

Const App = CreateApp (App)

ProvideApollOclient (Apolloclient)

app.mount ('#app')

Untuk Vue 2 , anda akan menggunakan Vue.use() dengan VueApollo .

Ambil data dengan Apollo dalam komponen

Sebaik sahaja Apollo disediakan, anda boleh menggunakannya dalam komponen anda untuk menanyakan atau bermutasi data.

Di Vue 3 , gunakan penggunaan yang useQuery atau useMutation :

 <persediaan skrip>
import {useQuery} dari &#39;@vue/apollo-composable&#39;
Import GQL dari &#39;Graphql-Tag&#39;

const {result, loading, error} = useQuery (gql`
  pertanyaan getPosts {
    Catatan {
      id
      tajuk
      kandungan
    }
  }
`)
</script>

<pemat>
  <div v-if = "loading"> loading ... </div>
  <div v-else-if = "error"> error: {{error.message}} </div>
  <div v-else>
    <ul>
      <li v-for = "post dalam result.posts": key = "post.id">
        <h3> {{post.title}} </h3>
        <p> {{post.content}} </p>
      </li>
    </ul>
  </div>
</template>

Untuk mutasi:

 import {usemutation} dari '@vue/apollo-composable'

const {mutate: addPost} = usemutation (gql`
  Mutasi AddPost ($ Tajuk: String!, $ Content: String!) {
    Insert_posts (objek: {title: $ title, content: $ content}) {
      Kembali {
        id
        tajuk
        kandungan
      }
    }
  }
`)

// memanggilnya dengan pembolehubah
addPost ({
  pembolehubah: {
    Tajuk: 'Pos Baru',
    Kandungan: 'Ini adalah jawatan baru.',
  },
})

Mengendalikan pembolehubah dan refetching

Anda sering perlu lulus pembolehubah kepada pertanyaan, seperti penapisan atau penomboran.

 const {result, refetch} = useQuery (
  gql`
    pertanyaan getUserPosts ($ userid: id!) {
      Catatan (di mana: {user_id: {_eq: $ userid}}) {
        id
        tajuk
      }
    }
  `,
  {userid: 123} // pembolehubah
)

Sekiranya data berubah dan anda ingin menyegarkan semula, hubungi refetch() secara manual atau sediakan pengundian:

 refetch ({userid: 456}) // run semula dengan pembolehubah baru

Anda juga boleh mengaktifkan pengundian automatik:

 UseQuery (pertanyaan, pembolehubah, {
  Pollinterval: 5000, // Setiap 5 saat
})

Mengurus keadaan pemuatan dan kesilapan

Apollo memberi anda loading dan error negeri keluar dari kotak. Gunakannya untuk memperbaiki UX.

• Tunjukkan pemutar semasa loading adalah benar.
• Paparkan mesej mesra pengguna apabila error wujud.
• Pertimbangkan menggunakan penggantungan dalam Vue 3 untuk aliran pemuatan yang bersih.

Anda juga boleh debounce atau permintaan pendikit jika anda menggunakan input carian dengan pertanyaan GraphQL.

Petua bonus

• Gunakan gql dari graphql-tag atau Enable .gql Fail Sokongan melalui Webpack untuk organisasi pertanyaan yang lebih baik.
• Dayakan caching dengan InMemoryCache untuk mengelakkan permintaan rangkaian yang tidak perlu.
• Gunakan serpihan untuk menggunakan semula bahagian pertanyaan di seluruh komponen.
• Untuk pengesahan, lampirkan tajuk (seperti Authorization ) di createHttpLink :

 const httplink = createHttPlink ({
  Uri: 'https://your-api.com/graphql',
  tajuk: {
    Kebenaran: `Pembawa $ {localStorage.getItem ('token')}`,
  },
})

Pada asasnya, apabila Apollo dikonfigurasikan, mengambil data menjadi deklaratif dan reaktif. Anda menentukan apa yang anda perlukan, Apollo mengendalikan selebihnya. Ia bersih, cekap, dan skala dengan baik dengan aplikasi Vue yang lebih besar.

Atas ialah kandungan terperinci Cara Menggunakan Graphql dengan Pelanggan Vue dan Apollo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!