VODIČ ZA POČETNIKE U GRAPHQL -U S ANGULAR I APOLLO

Vodič za početnike u GraphQL -u s Angular i Apollo

Izvorno objavio izdavač Swathi Prasad na https://techshard.com

GraphQL je dobivao na popularnosti i ušao je u prve redove razvoja API -ja. Danas je na raspolaganju nekoliko GraphQL klijenata za prednje okvire. Apolon client jedan je od popularnih klijenata za Angular aplikacije.

Izrada kutne aplikacije

Izradimo novi Angular projekt koristeći Angular CLI. Pokrenite sljedeću naredbu u terminalu ili naredbenom retku.

mutation { createVehicle(type: 'car', modelCode: 'XYZ0192', brandName: 'XYZ', launchDate: '2016-08-16') { id } }

Napravio sam projekt s Angular 8 za ovaj vodič.

Nakon što je projekt kreiran, idite do direktorija projekta kutni-apolon u naredbenom retku ili terminalu . Dodati apollo-kutni ovisnost pomoću naredbe u nastavku.

query { vehicles(count: 1) { modelCode, brandName } }

Ova naredba će dodati sljedeći popis ovisnosti u projekt.

react-native-card-list

ng new angular-apollo –style=scss –routing=true

Ova naredba također bi stvorila novu datoteku graphql.module.ts . Ova datoteka se može pronaći pod /src/app/. U ovoj datoteci pronaći ćete donji redak.

ng add apollo-angular

Dodajte ovaj URL http: // localhost: 8080/graphql na gornju liniju. Ovo je krajnja točka poslužitelja GraphQL koju sam stvorio u svom prethodnom članku.

Pristup krajnjim točkama GraphQL mutacije u Angular Apollo

GraphQL poslužitelj sadrži krajnje točke za stvaranje i čitanje podataka za Vozilo entiteta. Proces koji uključuje operacije pisanja naziva se mutacija. Ove operacije mogu uključivati stvaranje, ažuriranje i brisanje.

Model podataka vozila na poslužitelju izgleda ovako:

'apollo-angular': '^1.6.0', 'apollo-angular-link-http': '^1.6.0', 'apollo-cache-inmemory': '^1.3.2', 'apollo-client': '^2.6.0', 'apollo-codegen': '^0.20.2', 'apollo-link': '^1.2.11', 'graphql': '^14.3.1', 'graphql-tag': '^2.10.0'

Krajnja točka mutacije na poslužitelju je kao u nastavku.

const uri = ''; // <-- add the URL of the GraphQL server here

Sada ćemo pristupiti ovoj krajnjoj točki mutacije pomoću Apollo klijenta.

type Vehicle { id: ID!, type: String, modelCode: String, brandName: String, launchDate: String }

Dodao sam gornji kod u app.component.ts kao ispod. Ovo je samo osnovni primjer koji pokazuje kako se poziv vrši pomoću Apollo klijenta. Imajte na umu da bismo mogli koristiti usluge koje nudi Apollo klijent za ponovnu upotrebu i održavanje.

type Mutation { createVehicle(type: String!, modelCode: String!, brandName: String, launchDate: String):Vehicle }

U ovom pozivu možemo dohvatiti sva polja iz Vozilo objekt ili samo nekoliko polja koja su nam potrebna. Ovdje samo tražimo iskaznica polje. Poslužitelj vraća samo iskaznica polje u objektu podataka.

Upiti podataka pomoću Apollo klijenta

Kao što naslov govori, podatke ćemo dohvatiti pomoću GraphQL upita. Upit na poslužitelju je sljedeći:

this.apollo.mutate({ mutation: gql`mutation { createVehicle(type: 'car', modelCode: 'XYZ0192', brandName: 'XYZ', launchDate: '2016-08-16') { id } }` }).subscribe(data => { //successfully created vehicle entity. });

Pomoću Apollo klijenta pristupit ćemo gornjoj krajnjoj točki.

import { Component, OnInit } from '@angular/core'; import { Apollo } from 'apollo-angular'; import gql from 'graphql-tag'; @Component({  
 selector: ‘app-root’,  
 templateUrl: ‘./app.component.html’,  
 styleUrls: [‘./app.component.scss’]  
 })  
 export class AppComponent implements OnInit {
  data: any;
  constructor(private apollo: Apollo) { }
  ngOnInit() {  
 this.apollo.mutate({  
 mutation: gql|_+_|  
 }).subscribe(data => {  
 //successfully created vehicle entity.  
 });  
 }  
 }

Ovdje nas samo zanima modelCode i brandName polja. Poslužitelj vraća podatke samo s tim poljima.

Dodajmo malo HTML koda za prikaz podataka.

type Query {  
 vehicles(count: Int):[Vehicle]  
 vehicle(id: ID):Vehicle  
 }

Pokretanje aplikacije

Pokrenite aplikaciju pomoću posluživanja. Konačna aplikacija izgleda ovako u nastavku.

Završavati

Upravo smo izgrebali površinu Apollo klijenta. Nudi mnogo više mogućnosti. Za dodatne informacije pogledajte njihovu dokumentaciju.

Nadam se da vam se svidio ovaj članak. Javite mi ako imate bilo kakvih komentara ili prijedloga u donjem odjeljku komentara.

Primjer ovog vodiča možete pronaći na Spremište GitHub .

Hvala na čitanju ❤

Ako vam se svidio ovaj post, podijelite ga sa svojim prijateljima iz programiranja!

Pratite nas na Facebook | Cvrkut

Daljnje čitanje

☞ Angular 8 (ranije Angular 2) - Cjeloviti vodič

☞ Angular & NodeJS - VODIČ MEAK Stacka

☞ Cijeli tečaj za programere Node.js (3. izdanje)

☞ 50 najboljih pitanja za intervjue u obliku kuta za razvojne programere u 2019

☞ React vs Angular: dubinska usporedba

☞ React vs Angular vs Vue.js na primjeru

at&t bellsouth prijava

☞ Vodič za početnike u GraphQL -u

☞ Node, Express, PostgreSQL, Vue 2 i GraphQL CRUD Web App

Razvoj i osiguranje GraphQL API -ja s Laravelom

#angular #apollo #graphql #database #web-development

Vodič za početnike u GraphQL -u s Angular i Apollo