Instagram-klón felépítése a Reactben a GraphQL és a Hasura segítségével - II. Rész

Ezt az útmutatót Abhijeet Singh írta, és a Hasura Technical Writer Program részeként tették közzé - ez egy olyan kezdeményezés, amely támogatja azokat a szerzőket, akik útmutatásokat és oktatóanyagokat írnak a nyílt forráskódú Hasura GraphQL Engine számára.

A sorozat 1. részében beállítottuk a háttérprogramot és az Auth0-t. Ebben a részben beállítjuk a React alkalmazást, és csatlakoztatjuk a háttérrendszerhez.

React App Setup

Először a felhasználói hitelesítést valósítjuk meg. A JWT (JSON web tokeneket) fogjuk használni a hitelesítéshez. Először készítsünk néhány alapvető fejlécet a reagáló alkalmazásunkban a bejelentkezési gomb megjelenítéséhez.

Cserélje ki a stílusok / App.css fájl tartalmát erre a fájlra. Ezeket a stílusokat az alkalmazásunk egészében használjuk, így nem kell aggódnia a stílus miatt. Töltse le a fájlt és helyezze el a stílusaiba / könyvtárába. Ezt fogjuk használni a különféle gombok megjelenítéséhez alkalmazásunkban.

Telepítse az Apollo GraphQL Client alkalmazást

Cserélje ki az App.js tartalmát az Apollo GraphQL kliens használatához, az alább látható módon. (További információt az apollo github tárházban talál.)

A 15. sorban változtassa meg az uri értékét a hasura grafikon végpontjára, amelyet a hasura konzolon találhat (emlékezzen arra, hogy hol készített táblákat). Itt importáltuk a fejléc-összetevőt, amelyet most megvalósítunk.

Hozzon létre fejléc-összetevőt és használja a reagálási útvonalakat:

Az egyoldalas alkalmazás viselkedését a react-router fogja használni. Telepítse a react-útválasztót a következők használatával:

$ npm telepíteni react-router-dom
A React Router és a dinamikus, ügyféloldali útválasztás lehetővé teszi számunkra, hogy egyoldalas webalkalmazást készítsünk navigációval anélkül, hogy az oldal felfrissülne a felhasználó navigálása közben. A React Router az összetevő struktúráját használja az összetevők felhívására, amelyek megjelenítik a megfelelő információkat.
Az oldalfrissítés megakadályozásával és a Router vagy a Link használatával megakadályozható a fehér képernyő vagy az üres oldal villanása. Ez a folyamatosabb felhasználói élmény egyre gyakoribb módja. (forrás)

A react-router alkalmazásában történő alkalmazásához az egész alkalmazást be kell csomagolnunk a BrowserRouter-be. Ez egy kontextus-szolgáltató az útválasztáshoz, amely számos útmutatáshoz szükséges kelléket biztosít (például mérkőzés, hely, előzmények). Lásd ezt, ha nem ismeri a kontextust. Cserélje ki az index.js tartalmát:

Ezután létrehozunk egy Header összetevőt az alkalmazáson belüli navigációhoz. Hozzon létre egy Header.js fájlt az összetevők könyvtárában. A Header.js tartalmának a következőnek kell lennie:

Itt egy navigációs sávot hozunk létre, amely hasonló az Instagram navigációs sávhoz. Később hozzáadunk néhány útvonalat a navigáláshoz. Ez az! Sikeresen létrehozott egy fejléc navigációs sávot, és reagálási útvonalakat használtunk alkalmazásunkban.

Jelenleg az alkalmazásának így kell kinéznie

Auth0 JWT integráció a React App

Kövesse az Auth0-react-gyorsindítási útmutatót, referenciaként, hogy tartalmazza az Auth0-ot a react app-ban. Konfigurálja az Auth0 ügyfelet az Engedélyezett visszahívási URL-ek, az Engedélyezett webes eredet, az Engedélyezett kijelentkezés URL-ek beállításával a http: // localhost: 3000 webhelyre, és adja hozzá az egyéni API-t, ha még nem tette meg. Telepítse most az auth0-spa-js fájlt:

$ npm telepítés @ auth0 / auth0-spa-js

Most bele fogjuk foglalni a react-auth0-wrapper alkalmazást, amely egyéni reakt-horgok készlete, amely lehetővé teszi az Auth0 SDK-vel való együttműködést. Hozzon létre egy új src / auth könyvtárat, majd adja hozzá a react-auth0-wrapper.js fájlt.

Most adjunk hozzá egy másik fájlt auth / auth_config.json néven az src / auth fájlba. Töltse fel az auth_config.json kódot a következő kóddal (ennek megfelelően változtassa meg az értékeket):

Most készen állunk arra, hogy bejelentkezési funkciókat beépítsünk a react alkalmazásba. Alapvetően bejelentkezési gombot fogunk beilleszteni a fejlécbe. Ez a gomb az Auth0-on keresztül történő bejelentkezéshez vezet, és átirányítja a localhost-ba, miután a bejelentkezés / regisztráció befejeződött. Ugyanakkor a bejelentkezési / regisztrációs adatokat frissítjük a hasur háttérképű felhasználói táblázatban a korábban hozzáadott Auth0 szabályok miatt. Miután a bejelentkezés befejeződött, az AccessToken fájlt JWT formátumban kapjuk az App.js Auth0 SDK által biztosított funkciókkal. Ezt az accessToken-t majd engedélyezési fejlécként fogják használni az apollo kliens lekérdezéseiben a háttérrendszerhez, tehát minden lekérdezéshez, amely a háttérrendszerhez kerül, lesz engedélyezési fejléce.

Először módosítsa az index.js tartalmát a következőkre:

Itt az Auth0Provider-t használjuk, amely az Auth0 kliens környezet szolgáltatója. A gyermekek minden alkotóeleme hozzáférhet az Auth0 klienshez.

Miután megadtuk az alkalmazáshoz az Auth0 klienst, kicseréljük az összetevők / Header.js fájl tartalmát a következőkre:

A UseAuth0 kampót (7. sor) használjuk az Auth0 által biztosított különféle funkciók felhasználására. Az isAuthenticated segítségével ellenőrizhető, hogy a felhasználó be van-e jelentkezve. A loginWithRedirect a bejelentkezéshez és a bejelentkezés utáni átirányításhoz használható a megadott átirányítási URL-re. A felhasználói objektum információt tartalmaz az aktuálisan bejelentkezett felhasználóról.

Itt, ha a felhasználó be van jelentkezve, a felhasználói felhasználói profilba kerülünk, amelyet később megvalósítunk. Ha a felhasználó kijelentkezik, akkor csak a bejelentkezés gombot jelenítjük meg.

Most változtatni fogunk az App.js-ben az Auth0 funkciók beépítése érdekében. Az App.js tartalmát módosítsa a következőre:

UseState hook-ot (22. sor) használunk az eredeti accessToken érték üres karakterláncra állításához. Ha a felhasználó be van jelentkezve, a tokent lehívják az Auth0 SDK klienstől a getTokenSilently () segítségével (33. sor). Vegye figyelembe, hogy ez a funkció egy ígérettel tér vissza, és aszinkron. Ez a funkció megpróbálja visszaadni az aktuális hozzáférési jogkivonatot. Ha a token érvénytelen, a token csendesen frissül, mielõtt visszatérne a funkcióból. Ha a próbablokk sikeresen végrehajtásra kerül, az accessToken értékét a JWT hozzáférési tokenre állítja az Auth0 (34. sor).

Az összetevő újra megjelenik, amikor az accessToken értéket kapjuk. Így miután az async függvény végrehajtása befejeződött, az accessToken értékét állapotban tároljuk. Az összetevő újra megjelenik, és az apollo-kliens megkapja a jogkivonatot, ezáltal az egész ApolloProvider (környezet-szolgáltató) új jogkivonat-értékkel és a hitelesítési fejlécgel lesz átalakítva.

Amint megszerezzük az accessToken szolgáltatást, ezt az apollo kliens használatával kérések benyújtására használjuk a háttérrendszerünkre. Lásd az apollo-docs címet az apollo hitelesítéshez fejlécek segítségével. Alapvetően az accessToken-et autorizációs fejlécként (52. sor) adjuk át az apollo lekérdezéseinkben. Ezt az ügyfelet ezután az ApolloProvider-ben (kontextusszolgáltató) használják, hogy a gyermekelemek számára hozzáférést biztosítsanak az itt létrehozott apollo-klienshez.

Most már képesnek kell lennie arra, hogy jelentkezzen be az alkalmazásba. Törölje a gyorsítótárat és a bejelentkezést. Fel kell kérni, hogy a hasura háttérrendszerrel férjen hozzá az auth0 bérlőhöz. Adja meg a hozzáférést, és jó vagy menni.

Megjegyzés: Ha hibákat tapasztal, ne felejtse el tartani semmilyen függőséget a react-apollo függvénytől. Ehelyett @ apollo / react-horgokat kell használni.
Most az alkalmazásunk így néz ki

Hírcsatornák és kedvelések végrehajtása (a kedvelések valós idejű frissítései)

Bevezetjük a hozzászólások listáját (feed) és egy hasonló gombot. Hozzon létre egy új összetevőt / Feed.js mint:

A POSTS_LIST lekérdezés (8. sor) az adatbázisunkban lévő Post tábla részleteinek beolvasására szolgál. Megkérdezzük a bejegyzés azonosítóját. A useQuery (18. sor) egy egyedi apollo-kliens reagálási kampó. A lekérdezés adatait az adatobjektumban (18. sor) kapjuk meg, amelyet propként továbbítunk a Post összetevőhöz, amelyet most végrehajtunk.

Hozzon létre új összetevőket / Post.js mint:

Itt megkapjuk a kellékeket, amelyeket a Feed.js összetevő átad, és az id prop használatával a POST_INFO lekérdezés segítségével megkapjuk a teljes postai adatokat. Ezután az adatokat stilizálással adjuk vissza. A timeDifferenceForDate (68. sor) függvényt használjuk a post.created_at instagram stílusú idő konvertálására. Most végre kell hajtanunk ezt a funkciót. Olyan Like komponenst is importálunk, amely gondoskodik a hasonló funkciókról, amelyeket később bevezetünk.

Hozzon létre egy új src / utils könyvtárat, és hozzon létre egy új TimeDifference.js fájlt:

Ez csak egy segédprogram, amely konvertálja a dátum-idő adatokat a kívánt formátumba.

Most végrehajtjuk a Like komponenst. Hozzon létre új fájlösszetevőket / Like.js mint:

Mint a komponensek, a post_id-t megkapja a kellékeken keresztül. Itt két mutációt és egy lekérdezést írunk. A FETCH_LIKES a tetszésszám számának a Post táblából való lehívására szolgál. Azt is megkérdezzük, hogy a jelenleg bejelentkezett felhasználónak tetszett-e már a hozzászólás (15. sor). A LIKE_POST és a DELETE_LIKE a like elem beszúrásához és a Like táblából törléséhez használható.

A countLikes (tetszik számok) és tetszettségek (ha a felhasználó kedveli a bejegyzést) állapotváltozókban tároljuk. Az állapot változásakor a Like elem újra megjelenik, amely frissített képet nyújt nekünk, ha a felhasználónak tetszik a bejegyzés. Ha a felhasználónak tetszik a bejegyzés, akkor piros színt mutatunk, egyébként fehér színt mutatunk a felhasználói felületen. Ennek megvalósításához ellenőrizzük a tetszésnyilvántartás (104. sor) értékét, és ennek megfelelően renderezzük a gombokat. Amint a felhasználónak tetszik a bejegyzés, az állapot megváltozik (109. sor), az összetevő újra megjelenik, és hasonló mutáció fordul elő (108. sor), amely rögzíti a hasonlókat az adatbázisban, és megnő a kedvelések száma (110. sor).

Két mutációnk van: benyújtjuk a hasonlókat (58. sor) és töröljük a hasonlókat (69. sor). Mindkét mutáció a refetchQueries argumentumot használja (60. sor), amelyet a FETCH_LIKES lekérdezés visszaállításához használunk, ezáltal frissítve az apollo gyorsítótárat új értékekkel. Ez valós idejű kedveléseket valósít meg.

Most már minden elem van a helyén a post-feed bevezetéséhez. Az App.js-t meg kell változtatnunk, hogy felvegye a Feed.js-t. A következő módosítások végrehajtása az App.js-ben:

A kapcsoló a reakt router része, amelyet arra használnak, hogy az alkatrészeket illessék az útvonalukhoz. Helyezzen be néhány véletlenszerű adatot (hozzászólást) a Hasura Console-ból a Post táblázatba, próbálja ki az alkalmazást.

Most az alkalmazásunk így néz ki

Próbálja ki a tetszésnyilvánításokat, és a refetchQueriesnek köszönhetően megtekintheti a valós idejű frissítéseket a tetszés szerint. Még nem hajtottuk végre a felhasználói profilt, így a felhasználói profil linkei nem fognak működni. Ezután ezt követjük.

Felhasználói profil megvalósítása

Felhasználói profilunk Instagram stílusú felhasználói felülettel rendelkezik, a felhasználói adatokkal a tetején, az alábbiakban pedig a felhasználók által feltöltött üzenetek rácsával. A profilt két összetevőben valósítjuk meg: az egyik gondoskodik a fő felhasználói felület megjelenítéséről, a másik pedig a következő funkciók kezelése.

Hozzon létre új összetevőket / Profile.js mint:

Három különféle lekérdezésünk van, amelyek lekérik a megjelenítendő összes felhasználó alapadatát. Vegye figyelembe, hogy az összes lekérdezést egyszerre meghívhattuk volna, de miközben a lekérdezések újbóli frissítését követjük a mutáció következtében, az összes adatot újra kell töltenünk a gyorsítótár frissítéséhez, de csak az követett adatok változtak volna. Így két külön kérést tettünk a NUMBER_OF_FOLLOWERS (41. sor) és a NUMBER_OF_FOLLOWING (31. sor) számára. Ezeket a lekérdezéseket exportáltuk, így a Follow komponens végrehajtása közben képesek leszünk a lekérdezések importálására és újraküldésére. Ez egyértelműbbé válik, amikor elkezdjük megvalósítani a követési funkciókat.

A user_id paramétereket kapjuk, amelyeket felhasználunk a háttér-adatbázisunk lekérdezéséhez felhasználói információkért, az adott user_id számára. Az adatokat ezután visszaadjuk (). A kellékeket (user_id) itt átadjuk url formájában, és a props.match.params.id fájlt használjuk ennek a prop megszerzéséhez. Ezeket a kellékeket a react-router BrowserRouter kontextusszolgáltató biztosítja, amelyet az index.js fájl tartalmaz.

A (z) USER_INFO lekérdezés az adatok lekérésére szolgál a Felhasználó és a Bejegyzés táblából. A 103. sorban ellenőrizjük, hogy a jelenleg megjelenített profil megegyezik-e a jelenleg bejelentkezett felhasználóval. Ebben az esetben megjelenik a Kijelentkezés gomb. Ha a profil más felhasználókból származik, ehelyett a Követés gombot jelenítjük meg. Az isLoggedUser funkció ezt a feltételt ellenőrzi. A Követés gomb megvalósul a Következési komponensben, amelyet a következőkben végrehajtunk.

Ezenkívül react-bootstrap sorokat használunk a felhasználói profil alján található rácsok végrehajtására, soronként három elemmel (147. sor). A rács minden egyes elem egy kattintható link, amely a megfelelő hozzászóláshoz vezet. Itt átadjuk az azonosítót kellékekként az URL-en keresztül (a = {"/ post /" + post.id}) a 148. sorban, amelyhez a props.match.params.id címen lehet hozzáférni a fogadó komponensben. Ez egy reakt-router módszer a prop átadására. További részletekért lásd ezt a példát.

Most végrehajtjuk a Follow komponenst. Hozzon létre egy új fájl összetevőt / Follow.js mint:

Ez megegyezik a Like komponenssel. Beolvasásra kerül, hogy a jelenleg bejelentkezett felhasználó követi-e a jelenleg megjelenített profilt a FETCH_FOLLWERS lekérdezés segítségével. Ha a FETCH_FOLLWERS által visszaadott adatok nem üresek, akkor kezdetben valódi állapotot állítunk be (115. sor). Itt egy követett állapotot (49. sor) használunk annak ellenőrzésére, hogy az aktuális felhasználó követi-e a megjelenített profilt, és egy ref változó firstRun (52. sor), amely ellenőrzi, hogy az összetevőt először renderelték-e, ami hasznos, mivel szeretnénk végezzen bizonyos műveleteket (112. sor) csak az összetevő első megjelenítésével, például az eredeti érték igazítása valódi vagy hamis értékre, a FETCH_FOLLWERS lekérdezésből visszaadott adatok függvényében.

Emellett két olyan FOLLOW_USER és UNFOLLOW_USER mutációt is használunk, amelyek beillesztik és törlik az adatokat a háttérrendszer Kövesse táblázatából. Vegye figyelembe, hogy mindkét mutáció három lekérdezést állít vissza (66. sor) annak érdekében, hogy az apollo gyorsítótárat a mutáció után helyes adatokkal frissítsék. Ez automatikusan valósidejű adatfrissítéseket hajt végre, ahol a mutáció végrehajtása után a megjelenített profil követőinek száma és a bejelentkezett felhasználói frissítések követésének száma.

Most elvégezzük a szükséges módosításokat az App.js alkalmazásban. De először hozzon létre egy új fájlt összetevőként / SecuredRoute.js mint:

Ez segít nekünk olyan biztonságos útvonalak létrehozásában, amelyekhez csak akkor lehet hozzáférni, ha a felhasználó be van jelentkezve. Útválasztáskor biztonságos útvonalakat fogunk használni. Biztonsági útvonal használatával, ha valaki bejelentkezés nélkül próbál hozzáférni az URL-hez, a felhasználót automatikusan átirányítja a bejelentkezésre.

Most hajtsa végre a következő változtatásokat az App.js alkalmazásban:

Most már meg kell tudnia látogatni a felhasználói profilokat. Helyezzen be néhány minta adatot a Hasura konzolból, tekintse meg a felhasználói profilokat és kövesse a funkciókat. Lásd a valós idejű frissítést a következő funkcióban.

A felhasználói profil így néz ki

A Beküldés feladása funkció megvalósítása

Hozzon létre új fájlösszetevőket / Upload.js mint:

A SUBMIT_POST mutációval bejegyzést készíthetünk az adatbázis adatbázisába. A react-bootstrap modult használjuk az előugró ablak megjelenítéséhez az url és a felirat értékeinek megadásához. Jelenleg a képfeltöltés nem támogatott, mivel nem valósítunk meg tárolási szolgáltatást a képek tárolására.

Van egy űrlapunk (48. sor), amely két bemeneti mezőt tartalmaz a felirathoz és az URL-hez. A reagálási állapotot használjuk a képaláírás, az url és a hiba értékek tárolására (ha a mutáció nem sikerült). Ha az űrlapot beküldték, akkor az SubmitPost mutációt hívjuk meg, amely megváltoztatja az adatokat, és a refetchQueries frissíti az adatokat az apollo gyorsítótárban a POST_LIST és USER_INFO lekérdezésekhez, ezáltal frissítve a takarmányt és a felhasználói profilt.

Most elvégezzük a szükséges változtatásokat az App.js alkalmazásban:

Ha a felhasználó hitelesítve van, akkor megjelenik egy feltöltő gomb, amely kattintással megnyitja a következő felugró ablakot:

Végül készen állunk alkalmazásunkra a feltöltési üzenet funkcióval. Navigálhat a felhasználói profilokhoz, új hozzászólásokat hozhat létre, és valós idejű frissítéseket láthat az új hozzászólások, kedvelések és követések alapján.

Most kell működő Instagram-klónod. Esetleg arra, hogy hivatkozni szeretne rá, az alkalmazás végleges kódja itt található. Lásd az alkalmazás élő bemutatóját itt.

Köszönetnyilvánítás:

TimeDifference funkció: https://github.com/howtographql/react-apollo

Néhány stílus a következőhöz: https://pusher.com/tutorials/instagram-clone-part-1

A szerzőről

Abhijeet Singh a IIIT Kalyani számítástechnika és mérnöki végzettségű hallgató. Dolgozott a Full Stack Fejlesztés, az Android, a Deep Learning, a Machine Learning és az NLP területén. Aktívan részt vesz a versenyképes programozási versenyeken, és érdekli az algoritmikus problémák megoldása. Startup rajongó, szabadidőben asztalitenisz és gitár játszik.

Eredetileg a https://blog.hasura.io oldalon, 2019. szeptember 6-án tették közzé.