Mula membina API graphql dengan nod

Kita semua mempunyai banyak minat dan hobi. Sebagai contoh, saya berminat dengan JavaScript, '90-an indie rock dan hip-hop, jazz tidak popular, bandar Pittsburgh, pizza, kopi, dan filem yang dibintangi oleh John Lury. Keluarga, kawan, kenalan, rakan sekelas dan rakan sekerja kami juga mempunyai hubungan sosial, minat dan hobi sosial mereka sendiri. Beberapa hubungan dan minat ini bertindih, seperti rakan saya Riley sama seperti tertarik dengan hip-hop dan pizza 90-an seperti yang saya lakukan. Orang lain tidak bertindih, seperti rakan sekerja saya Harrison, yang lebih suka Python atas JavaScript, hanya minum teh dan lebih suka muzik pop semasa. Semua dalam semua, kita masing -masing mempunyai peta hubungan dengan orang dalam kehidupan kita dan bagaimana hubungan dan kepentingan kita bertindih.

Jenis data yang saling berkaitan adalah betul -betul cabaran GraphQL pada mulanya mula diselesaikan dalam pembangunan API. Dengan menulis API GraphQL, kami dapat menyambungkan data dengan berkesan, mengurangkan kerumitan dan permintaan kiraan sambil membenarkan kami memberikan data yang diperlukan kepada pelanggan dengan tepat. (Jika anda lebih suka metafora GraphQL, lihat memenuhi GraphQL pada pesta koktel.)

Dalam artikel ini, kami akan menggunakan pakej pelayan Apollo untuk membina API GraphQL di Node.js. Untuk melakukan ini, kami akan meneroka topik GraphQL asas, menulis corak GraphQL, membangunkan kod untuk menghuraikan fungsi corak kami, dan mengakses API kami menggunakan antara muka pengguna GraphQL Playground.

Apa itu Graphql?

GraphQL adalah pertanyaan sumber terbuka dan bahasa manipulasi data untuk API. Matlamat pembangunannya adalah untuk menyediakan satu titik akhir untuk data, yang membolehkan aplikasi meminta data yang tepat yang mereka perlukan. Ini bukan sahaja membantu memudahkan kod UI kami, tetapi juga meningkatkan prestasi dengan mengehadkan jumlah data yang perlu dihantar melalui rangkaian.

Apa yang kita bina

Untuk mengikuti tutorial ini, anda memerlukan node v8.x atau lebih lama dan beberapa pengalaman menggunakan baris arahan.

Kami akan membina permohonan API untuk petikan buku yang membolehkan kami menyimpan perenggan yang tidak dapat dilupakan dari apa yang kami baca. Pengguna API akan dapat melaksanakan operasi "CRUD" (membuat, membaca, mengemas kini, memadam) pada petikan mereka:

• Buat petikan baru
• Baca satu petikan dan senarai petikan
• Petikan yang dikemas kini
• Padam petikan

Mula

Pertama, buat direktori baru untuk projek kami, memulakan projek nod baru, dan pasang kebergantungan yang kami perlukan:

 <code># 创建新目录mkdir highlights-api # 进入目录cd highlights-api # 初始化新的节点项目npm init -y # 安装项目依赖项npm install apollo-server graphql # 安装开发依赖项npm install nodemon --save-dev</code>

Sebelum kita meneruskan, mari kita memecahkan kebergantungan kita:

• apollo-server adalah perpustakaan yang membolehkan kami menggunakan GraphQL dalam aplikasi nod kami. Kami akan menggunakan ini sebagai perpustakaan yang berdiri sendiri, tetapi pasukan Apollo juga telah mencipta middleware untuk bekerja dengan Express, HAPI, Fastify, dan KOA dalam aplikasi web nod sedia ada.
• graphql mengandungi bahasa GraphQL dan merupakan kebergantungan rakan sebaya yang diperlukan untuk apollo-server .
• nodemon adalah perpustakaan yang berguna yang akan memantau projek kami untuk perubahan dan memulakan semula pelayan kami secara automatik.

Selepas memasang pakej kami, mari buat fail root aplikasi, bernama index.js . Sekarang, kami akan menggunakan console.log() untuk mengeluarkan mesej dalam fail ini:

 <code>console.log("? Hello Highlights");</code>

Untuk memudahkan proses pembangunan kami, kami akan mengemas kini objek scripts dalam fail package.json untuk menggunakan pakej nodemon :

 <code>"scripts": { "start": "nodemon index.js" },</code>

Sekarang kita boleh memulakan permohonan kami dengan menaip npm start dalam aplikasi terminal. Sekiranya semuanya berfungsi dengan baik, adakah anda akan melihat ? Hello Highlights masuk ke terminal anda.

Jenis skema GraphQL

Corak adalah perwakilan bertulis dari data dan interaksi kami. Melalui corak yang diperlukan, GraphQL melaksanakan perancangan yang ketat untuk API kami. Ini kerana API hanya boleh mengembalikan data yang ditakrifkan dalam skema dan melakukan interaksi. Komponen asas corak GraphQL adalah jenis objek. GraphQL mengandungi lima jenis terbina dalam:

• String: String yang dikodkan menggunakan aksara UTF-8
• Boolean: Nilai Benar atau Palsu
• Int: Integer 32-bit
• Float: Nilai Terapung
• ID: Pengenal pasti unik

Kita boleh menggunakan komponen asas ini untuk membina corak API. Dalam fail yang dipanggil schema.js , kami boleh mengimport perpustakaan gql dan menyediakan fail untuk sintaks skema kami:

 <code>const { gql } = require('apollo-server'); const typeDefs = gql` # 模式将放在这里`; module.exports = typeDefs;</code>

Untuk menulis corak kami, kami mula -mula menentukan jenisnya. Mari kita pertimbangkan bagaimana kita menentukan corak untuk aplikasi petikan kami. Pertama, kami akan membuat jenis baru yang dipanggil Highlight :

 <code>const typeDefs = gql` type Highlight { } `;</code>

Setiap petikan akan mempunyai ID unik, beberapa kandungan, tajuk, dan pengarang. Mod sorotan akan kelihatan seperti ini:

 <code>const typeDefs = gql` type Highlight {  id: ID  content: String  title: String  author: String } `;</code>

Kita boleh membuat beberapa bidang ini sebagai medan yang diperlukan dengan menambahkan tanda seru:

 <code>const typeDefs = gql` type Highlight {  id: ID!  content: String!  title: String  author: String } `;</code>

Walaupun kami telah menentukan jenis objek untuk petikan kami, kami juga perlu menerangkan bagaimana pelanggan mendapat data tersebut. Ini dipanggil pertanyaan. Kami akan menyelam ke dalam pertanyaan kemudian, tetapi sekarang mari kita terangkan bagaimana seseorang mengambil petikan dalam corak kami. Apabila semua petikan kami diminta, data akan dikembalikan sebagai array (dilambangkan sebagai [Highlight] ), dan apabila kami ingin mengambil satu petikan tunggal, kami perlu lulus ID sebagai parameter.

 <code>const typeDefs = gql` type Highlight {  id: ID!  content: String!  title: String  author: String } type Query {  highlights: [Highlight]!  highlight(id: ID!): Highlight } `;</code>

Sekarang, dalam fail index.js , kami boleh mengimport definisi jenis kami dan menyediakan pelayan Apollo:

 <code>const {ApolloServer } = require('apollo-server'); const typeDefs = require('./schema'); const server = new ApolloServer({ typeDefs }); server.listen().then(({ url }) => { console.log(`? Highlights server ready at ${url}`); });</code>

Jika kami mengekalkan proses nod berjalan, aplikasi akan dikemas kini dan dimulakan semula secara automatik, tetapi jika tidak, menaip npm start dari direktori projek dalam tetingkap terminal akan memulakan pelayan. Jika kita melihat terminal, kita harus melihat bahawa Nodemon sedang memantau fail kami dan pelayan sedang berjalan di port tempatan:

 <code>[nodemon] 2.0.2 [nodemon] to restart at any time, enter `rs` [nodemon] watching dir(s): *.* [nodemon] watching extensions: js,mjs,json [nodemon] starting `node index.js` ? Highlights server ready at http://localhost:4000/</code>

Mengakses URL dalam penyemak imbas melancarkan aplikasi GRAPHQL Playground, yang menyediakan antara muka pengguna untuk berinteraksi dengan API kami.

GraphQL Parser

Walaupun kami telah membangunkan projek kami menggunakan mod awal dan tetapan pelayan Apollo, kami tidak dapat berinteraksi dengan API kami lagi. Untuk melakukan ini, kami akan memperkenalkan parser. Para parser melakukan operasi yang tepat yang tersirat oleh nama mereka; Mereka menghuraikan data yang diminta oleh pengguna API. Kami akan menulis parser ini dengan terlebih dahulu mendefinisikannya dalam skema kami dan kemudian melaksanakan logik dalam kod JavaScript kami. API kami akan mengandungi dua jenis parser: pertanyaan dan mutasi.

Mari kita tambahkan beberapa data untuk berinteraksi dengan. Dalam aplikasi, ini biasanya data yang kami ambil dan tulis dari pangkalan data, tetapi untuk contoh kami, mari kita gunakan pelbagai objek. Tambahkan yang berikut ke fail index.js :

 Biarkan sorotan = [
  {
    ID: '1',
    Kandungan: 'Suatu hari saya akan menemui kata -kata yang betul, dan mereka akan mudah.',
    Tajuk: 'Dharma Bums',
    Pengarang: 'Jack Kerouac'
  },
  {
    ID: '2',
    Kandungan: 'Dalam batas keadaan ada humor, ada rahmat, dan segala yang lain.',
    Tajuk: 'matlamat bodoh sewenang -wenangnya',
    Pengarang: 'Tamara Shopsin'
  }
]

Pertanyaan

Permintaan permintaan data khusus dari API dan memaparkannya dalam format yang dikehendaki. Pertanyaan kemudian akan mengembalikan objek yang mengandungi data yang diminta oleh pengguna API. Pertanyaan tidak pernah mengubah data; Ia hanya mengakses data. Kami telah menulis dua pertanyaan dalam skema ini. Yang pertama mengembalikan pelbagai petikan, dan yang kedua mengembalikan petikan khusus. Langkah seterusnya ialah menulis parser yang akan mengembalikan data.

Dalam fail index.js , kami boleh menambah objek resolvers yang boleh mengandungi pertanyaan kami:

 const resolvers = {
  Pertanyaan: {
    Sorotan: () => Sorotan,
    Sorotan: (ibu bapa, args) => {
      kembali sorotan.find (sorotan => sorotan.id === args.id);
    }
  }
};

Pertanyaan highlights mengembalikan pelbagai data petikan lengkap. Pertanyaan highlight menerima dua parameter: parent dan args . parent adalah parameter pertama untuk mana -mana pertanyaan Graqhql di pelayan Apollo dan menyediakan cara untuk mengakses konteks pertanyaan. Parameter args membolehkan kami mengakses parameter yang disediakan oleh pengguna. Dalam kes ini, pengguna API akan menyediakan parameter id untuk mengakses petikan tertentu.

Kami kemudian boleh mengemas kini konfigurasi pelayan Apollo kami untuk memasukkan resolver:

 const server = baru Apolloserver ({typedefs, resolvers});

Selepas menulis Parser pertanyaan kami dan mengemas kini pelayan Apollo, kini kami boleh menggunakan API pertanyaan Graphql Playground. Untuk mengakses Graphql Playground, lawati http://localhost:4000 dalam pelayar web anda.

Format pertanyaan adalah seperti berikut:

 pertanyaan {
  QueryName {
      medan
      medan
    }
}

Dengan ini, kita boleh menulis pertanyaan yang meminta ID, kandungan, tajuk, dan pengarang setiap petikan kami:

 pertanyaan {
  Sorotan {
    id
    kandungan
    tajuk
    pengarang
  }
}

Katakan kami mempunyai halaman dalam UI yang hanya menyenaraikan tajuk dan pengarang teks yang diserlahkan kami. Kami tidak perlu mengambil kandungan setiap petikan. Sebaliknya, kita boleh menulis pertanyaan yang hanya meminta data yang kita perlukan:

 pertanyaan {
  Sorotan {
    tajuk
    pengarang
  }
}

Kami juga menulis parser yang menanyakan komen individu dengan memasukkan parameter ID dalam pertanyaan kami. Kita boleh melakukan ini:

 pertanyaan {
  Sorotan (id: "1") {
    kandungan
  }
}

Mutasi

Apabila kita mahu mengubah suai data dalam API, kita menggunakan mutasi. Dalam contoh petikan kami, kami akan ingin menulis variasi untuk membuat petikan baru, petikan sedia ada yang dikemas kini, dan satu pertiga untuk memadam petikan. Sama seperti pertanyaan, mutasi juga harus mengembalikan hasil dalam bentuk objek, biasanya hasil akhir operasi yang dilakukan.

Langkah pertama dalam mengemas kini apa -apa dalam GraphQL ialah menulis corak. Kami boleh memasukkan variasi dalam skema dengan menambahkan jenis varian ke fail schema.js kami:

 jenis mutasi {
  NewHighlight (Kandungan: String! Tajuk: String Pengarang: String): Sorotan!
  UpdateHighlight (ID: ID! Kandungan: String!): Sorot!
  DeleteHighlight (id: id!): Sorotan!
}

Varian newHighlight kami akan mengambil nilai yang diperlukan content dan title pilihan dan nilai author dan mengembalikan Highlight . Varian updateHighlight akan memerlukan highlight id dan content sorotan yang akan diluluskan sebagai nilai parameter dan akan mengembalikan Highlight yang dikemas kini. Akhirnya, varian deleteHighlight akan menerima parameter ID dan akan mengembalikan Highlight yang dipadam.

Selepas mengemas kini corak untuk memasukkan mutasi, kini kami boleh mengemas kini resolvers dalam fail index.js untuk melaksanakan operasi ini. Setiap mutasi mengemas kini pelbagai data highlights kami.

 const resolvers = {
  Pertanyaan: {
    Sorotan: () => Sorotan,
    Sorotan: (ibu bapa, args) => {
      kembali sorotan.find (sorotan => sorotan.id === args.id);
    }
  },
  Mutasi: {
    newHighlight: (ibu bapa, args) => {
      sorotan const = {
        ID: String (sorotan.length 1),
        Tajuk: args.title || '',
        Pengarang: args.author || '',
        Kandungan: args.content
      };
      sorotan.push (sorotan);
      kembali sorotan;
    },
    UpdateHighlight: (ibu bapa, args) => {
      const index = highlights.FindIndex (sorotan => sorotan.id === args.id);
      sorotan const = {
        ID: args.id,
        Kandungan: args.content,
        Pengarang: Sorotan [Indeks]. Penggerak,
        Tajuk: Sorotan [Indeks] .Title
      };
      Sorotan [indeks] = sorotan;
      kembali sorotan;
    },
    DeleteHighlight: (ibu bapa, args) => {
      const deletedHighlight = sorotan.find (
        sorotan => sorotan.id === args.id
      );
      sorotan = sorotan.filter (sorotan => sorotan.id! == args.id);
      kembali DeletedHighlight;
    }
  }
};

Selepas menulis mutasi ini, kita boleh mengamalkan data mutasi menggunakan GraphQL Playground. Struktur mutasi hampir sama dengan pertanyaan, yang menyatakan nama mutasi, nilai parameter lulus, dan meminta pulangan data tertentu. Mari kita tambahkan petikan baru:

 mutasi {
  newHighlight (pengarang: "Adam Scott" Tajuk: "JS Di mana -mana" Kandungan: "Graphql adalah Awesome") {
    id
    pengarang
    tajuk
    kandungan
  }
}

Kami kemudian boleh menulis mutasi untuk mengemas kini petikan:

 mutasi {
  UpdateHighlight (id: "3" Kandungan: "Graphql adalah rad") {
    id
    kandungan
  }
}

Dan padamkan petikan:

 mutasi {
  DeleteHighlight (id: "3") {
    id
  }
}

Meringkaskan

Tahniah! Anda kini telah berjaya membina API GraphQL yang menggunakan pelayan Apollo dan boleh menjalankan pertanyaan GraphQL dan mutasi pada objek data dalam memori. Kami telah meletakkan asas yang kukuh untuk meneroka dunia pembangunan API GraphQL.

Berikut adalah beberapa langkah seterusnya untuk meningkatkan tahap anda:

• Ketahui mengenai pertanyaan dan mutasi GraphQL bersarang.
• Ikuti tutorial Stack Full Apollo.
• Kemas kini contoh untuk memasukkan pangkalan data seperti MongoDB atau PostgreSQL.
• Terokai lebih banyak artikel CSS-Tricks GraphQL.
• Gunakan pengetahuan GraphQL yang baru diperoleh untuk membina laman web statik menggunakan Gatsby.

Atas ialah kandungan terperinci Mula membina API graphql dengan nod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!