Ați auzit multe despre utilizarea React cu GraphQL, dar nu știți cum să le combinați pentru a crea aplicații uimitoare? În acest curs accidental, veți învăța cum să faceți acest lucru construind o aplicație completă de bloguri sociale.

Într-o după-amiază, veți dobândi abilitățile de bază pentru a vă construi propriile proiecte React și GraphQL.

Vrei să începi acum? Puteți accesa întregul curs chiar aici.

De ce ar trebui să învățați React cu GraphQL?

React este biblioteca accesibilă pentru a crea experiențe uimitoare de aplicații cu JavaScript. GraphQL, pe de altă parte, este un instrument care ne oferă un mijloc mai bun și mai simplu de a obține și de a modifica datele noastre.

Aceste date ar putea proveni dintr-o bază de date standard (așa cum vom folosi în aplicația noastră) sau așa cum au făcut posibil cadrele React, cum ar fi Gatsby, chiar și din fișiere statice, cum ar fi fișierele de reducere. Indiferent de modul în care este stocat, GraphQL îmbunătățește lucrul cu datele din aplicațiile noastre.

Vom vedea cum să valorificăm puterile React și GraphQL prin crearea unei aplicații de bloguri sociale de la început până la sfârșit, unde puteți crea, citi, edita și șterge postări.

Faceți clic pentru a accesa cursulFaceți clic pentru a accesa cursul

Ce instrumente vom folosi? ️

Cursul accidental este destinat dezvoltatorilor care sunt oarecum familiarizați cu React (inclusiv nucleul React Hooks, cum ar fi useState și useEffect), dar încă nu sunt familiarizați cu GraphQL.

Cunoștințele de bază React sunt asumate, dar cunoștințele GraphQL nu sunt necesare. Vom acoperi toate conceptele de bază GraphQL de care aveți nevoie pe parcurs.

De-a lungul cursului, vom utiliza următoarele tehnologii pentru a crea aplicația noastră:

  • Reacţiona (pentru a construi interfața noastră cu utilizatorul)
  • GraphQL (pentru a obține și schimba date într-un mod declarativ)
  • Clientul Apollo (pentru a ne permite să folosim React și GraphQL împreună)
  • Hasura (pentru a crea și gestiona baza noastră de date GraphQL API +)

Pentru a completa, vom folosi IDE CodeSandbox online. Acest lucru ne va permite să codificăm întreaga noastră aplicație în browser în timp real, fără a fi nevoie să creăm fișiere, foldere sau să instalăm dependențe pe cont propriu.

Crearea unui API GraphQL de la zero

Pentru a începe să lucrăm cu GraphQL, vom vedea cum să realizăm de la zero un API GraphQL întreg care să comunice cu baza noastră de date.

Din fericire, folosind serviciul (gratuit) Hasura, acest proces este foarte simplu și direct. În câteva secunde, vom vedea cum să creăm și să implementăm un API GraphQL complet pe web, care este conectat la o bază de date Postgres care se va ocupa de stocarea datelor aplicației noastre.

Faceți clic pentru a accesa cursulFaceți clic pentru a viziona această prelegere

Familiarizarea cu GraphQL

În cea de-a doua prelegere, vom aborda cum să scrieți în limbajul GraphQL folosind consola încorporată API numită GraphiQL.

În primul rând, vom crea un tabel în baza noastră de date pentru toate datele despre postări. După care, Hasura va crea automat fișierul întrebări și mutații avem nevoie, care sunt numele operațiunilor GraphQL care ne permit să obținem și să schimbăm date în baza noastră de date.

De-a lungul acestei lecții, vom obține interogări și mutații foarte performante în GraphiQL, ceea ce ne va permite să obținem seturi întregi de postări și postări individuale, precum și să creăm, să actualizăm și să ștergem datele noastre individuale de postare.

Faceți clic pentru a accesa cursulFaceți clic pentru a viziona această prelegere

Conectarea React cu API-ul nostru GraphQL folosind Apollo Client

Acum că ne simțim confortabili cu utilizarea GraphQL și înțelegem caracteristicile sale de bază, vom vedea cum să-l conectăm cu clientul nostru React.

Modul în care conectăm aplicația noastră React cu API-ul GraphQL pe care l-am creat este printr-o bibliotecă numită Apollo. Vom vedea cum să configurăm clientul Apollo, oferind punctul final GraphQL, care indică API-ul nostru, astfel:

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "https://react-graphql.herokuapp.com/v1/graphql"
});

Cu clientul nostru nou creat, avem capacitatea de a executa orice operațiune GraphQL prin React. Pentru a face acest lucru, totuși, trebuie să ne transmitem clientul la întregul nostru, la toate componentele noastre React. Facem asta cu ajutorul furnizorului Apollo, după cum vedeți mai jos:

Faceți clic pentru a accesa cursulFaceți clic pentru a viziona această prelegere

Obținerea de postări cu useQuery

După configurarea clientului nostru, vom vedea cum să executăm diferite operațiuni GraphQL cu ei, folosind câteva cârlige speciale React care vin cu pachetul @apollo/react-hooks.

Cârligul care ne permite să interogăm date cu GraphQL se numește useQuery. Cu aceasta, vom vedea mai întâi cum să obținem și să afișăm toate datele despre postări pe pagina noastră de pornire.

În plus, vom învăța cum să scriem interogările noastre GraphQL direct în fișierele noastre JavaScript cu ajutorul unei funcții speciale numite gql.

import React from "react";
import { useQuery } from "@apollo/react-hooks";
import { gql } from "apollo-boost";

export const GET_POSTS = gql`
  query getPosts {
    posts {
      id
      title
      body
      createdAt
    }
  }
`;

function App() {
  const { data, loading } = useQuery(GET_POSTS);

  if (loading) return <div>Loading...</div>;
  if (data.posts.length === 0) return <Empty />;

  return (
    <>
      <header className={classes.header}>
        <h2 className={classes.h2}>All Posts</h2>
        <Link to="/new" className={classes.newPost}>
          New Post
        </Link>
      </header>
      {data.posts.map(post => (
        <Post key={post.id} post={post} />
      ))}
    </>
  );
}

Crearea și editarea de postări noi cu useMutation

După aceea, vom vedea cum să creăm postări noi cu useMutation cârlig. Pentru a face acest lucru, vom arunca o privire asupra modului de a lucra cu variabilele GraphQL pentru a transmite valorile noastre dinamice de mutație care se vor schimba cu fiecare execuție.

În continuare vom arunca o privire asupra modului de editare a postărilor noastre. Pentru a face acest lucru, va trebui să preluăm o postare individuală și să o afișăm în formularul nostru, astfel încât utilizatorul nostru să poată modifica datele. Apoi, va trebui să executăm o mutație care va efectua actualizarea, pe baza id-ului postărilor.

Faceți clic pentru a accesa cursulFaceți clic pentru a viziona această prelegere

Manevrați încărcarea și erorile

În următoarea prelegere, vom acoperi câteva modele esențiale pentru gestionarea procesului de încărcare a datelor noastre.

Este important să facem acest lucru atunci când executăm o mutație, pentru a ne asigura că nu trimitem formularele de mai multe ori pe măsură ce mutația noastră este executată. De asemenea, vom arunca o privire la cum să gestionăm erorile în cazul în care mutația noastră nu este executată corect.

Faceți clic pentru a accesa cursulFaceți clic pentru a viziona această prelegere

Ștergerea postărilor

În cele din urmă, vom prezenta cum să ștergeți postările din aplicația noastră. Mai întâi, vom confirma că utilizatorul dorește să șteargă de fapt postarea pe care a făcut-o, apoi să efectueze mutația.

În plus, vom arunca o privire asupra modului de actualizare a interfeței noastre de utilizare ca răspuns la mutații cu ajutorul instrumentului refetch funcție pe care ni-o dă Apollo. Ne va permite să executăm din nou o interogare la cerere. În acest caz, o vom face după ce mutația de ștergere a fost efectuată cu succes.

Faceți clic pentru a accesa cursulFaceți clic pentru a viziona această prelegere

Urmăriți cursul acum?

React și GraphQL se află în centrul a numeroase aplicații web și mobile puternice și nu a existat niciodată un moment mai bun pentru a învăța cele două.

Luați cursul și, într-o oră, veți învăța concepte de bază care vă vor dezvolta în mod semnificativ abilitățile de dezvoltator și vă vor oferi informații esențiale pentru a vă crea propriile proiecte React și GraphQL!

Faceți clic pentru a accesa cursulFaceți clic pentru a viziona cursul