Bygga en Instagram-klon i React med GraphQL och Hasura - Del I

Denna handledning är skriven av Abhijeet Singh och publicerades som en del av Hasura Technical Writer Program - ett initiativ som stöder författare som skriver guider och tutorials för den öppna källan Hasura GraphQL Engine.

Introduktion

I den här tutorialen kommer jag att visa dig hur du använder Hasura GraphQL Engine and React för att bygga en klon av Instagram-appen Instagram. Den sista koden är värd här. Se live-demo av appen här.

Appen har följande funktioner:

  • Användare kan skapa konto (med Auth0-autentisering)
  • Autentiserade användare kan ladda upp nya inlägg
  • Autentiserade användare kan gilla inlägg
  • Autentiserade användare kan följa användarkonton
  • Visa inlägg i flödet
  • Realtidsuppdateringar när andra användare upvote ett inlägg, skapar ett nytt inlägg eller följer användarprofil (med hjälp av reaktortillstånd och uppdatering av apollo-cache)

Första installationen

Låt oss börja med att bygga framsidan av vår app med React.

För att komma igång snabbt kommer vi att skapa en grundläggande reaktionsapp utan byggkonfiguration med hjälp av skapa-reagera-app. Kör följande kommandon i terminalen:

$ npx skapa-reagera-app instagram-klon $ cd instagram-klon $ npm start
Obs: npx är en npm-paketlöpare. Den typiska användningen är att ladda ner och köra ett paket tillfälligt eller för tester. create-react-app är ett npm-paket som förväntas köras endast en gång i projektets livscykel. Därför är det föredraget att använda npx för att installera och köra det i ett enda steg. (källa)

Servern startar och du bör kunna se en välkomstreaktionsskärm (som nedan) på http: // localhost: 3000.

För att förbättra projektstrukturen, låt oss skapa två kataloger, båda i src-mappen. Den första kallas komponenter och kommer att innehålla alla våra React-komponenter. Den andra stilen, det är för alla CSS-filer du använder.

Flytta de nödvändiga jsx- och css-filerna till lämpliga kataloger och ändra referenser till dessa filer i både index.js och App.js i enlighet därmed. Din katalogstruktur ska se ut så här:

├── node_moduler ├── paket.json ├── offentligt │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.test.js │ ├ ── komponenter │ │ └── App.js │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── stilar │ ├── App.css │ └── index. css └── README.md

Jag kommer att använda react-bootstrap-paketet för stylingen. Installera paketet med:

$ npm installera react-bootstrap bootstrap

Se till att lägga till CDN-länkarna till formatmallar i /public/index.html. Kopiera länkarna härifrån.

Installera också reakt-apollo GraphQL Client med följande kommando:

$ npm installera apollo-boost apollo-link-context @ apollo / react-hooks @ apollo / react-hoc graphql

Apollo Client hjälper dig att konsumera ett GraphQL API från front-end.

Därefter ställer vi in ​​backend med Hasura GraphQL Engine och Postgres.

Se den här guiden för att snabbt komma igång med Hasura GraphQL-motor och Postgres som körs på Heroku med en klickdistribution.

Ställa in backend

Vår Postgres databasstruktur:

typ inlägg {id - heltal, primär nyckeltitel - text url - text skapad_at - tidsstämpel med tidszon user_id - text} typ Användare {namn - text last_seen - tidsstämpel med tidszonavatar - text e-post - text-id - text, primär nyckel} typ Som {id - heltal, primär nyckel user_id - text post_id - heltal} typ Följ {id - heltal, primär nyckel follower_id - text following_id - text}
Databestruktur

Skapa tabeller

Skapa följande tabeller: Användartabell

användartabell

Posttabell (id har typ heltal (autoinkrement)):

postbord

Lägg till den främmande nyckelbegränsningen från user_id-kolumnen till User.id. Ställ in uppdatering och radera överträdelse som begränsning.

Som tabell (id har typen heltal (autoinkrement)):

som bord

Följ tabellen (id har typ heltal (autoinkrement)):

Följ tabellen

Skapa en objektrelation genom att hoppa till relationsavsnittet i tabellerna. Dessa relationer hjälper oss att fråga data i en enda fråga och även utföra olika typer av sammanlagda funktioner som att få antal inlägg för varje användare. Se den här länken för att skapa relationer via utländsk nyckel i hasura. Vi behöver bara följande relationer.

användartabellpostbord

Nu kommer vi att ställa in behörigheterna för tabellerna, så att bara inloggade användare kan göra vissa saker. Ställ in behörigheterna som visas nedan:

användartabellpostbordSom bordFölj tabellen

Se grunderna för åtkomstkontroll om du inte känner till åtkomstkontrollen och hur det fungerar i hasura.

För att göra det mindre komplicerat har jag gett alla radnivåbehörigheter som utan kontroller och kolumnnivå som alla kolumner och aggregeringsfrågor (används för att räkna antal poäng för en post).

Använda Auth0 JWT för autentisering

Följande bild förklarar snabbt hur JWT-autentisering fungerar. Här måste applikationsserver (vår backend) konfigureras för att verifiera att den inkommande JWT skapas av autentiseringsservern (Auth0). (Källa)

Vi använder Auth0 som autentiseringsserver. Det skapar en JWT och skickas till vår reaktionsapp. Sedan, med apollo-klient, skickar vi autor_token (access_token i vårt fall) till vår backend (applikationsserver), dvs. Hasura GraphQL Engine. Hasura behövs för att konfigureras för att verifiera att inkommande JWT skapas av Auth0-autentiseringsserver.

Låt oss komma igång med Auth0 med @ apollo / react-hooks och @ autor0 / auth0-spa-js. Vi måste följa dessa steg:

Auth0 JWT-integration med Hasura: Se den här guiden för Auth0 JWT-integration med Hasura och få JWK (nyckel för validering av inkommande JWT). I Auth0-instrumentpanelen ställer du in tillåtna återuppringningsadresser, tillåtna webbutgivningar, tillåtna utloggningsadresser till http: // localhost: 3000 och sparar ändringar.

Du kanske också måste inaktivera OIDC Conformant i Auth0> Applications> Your_app> Settings> Advanced Settings. När du har nyckeln är nästa steg att aktivera JWT-läget i Hasura. Gå till din heroku instrumentpanel, välj vår app och gå till inställningar. Här kan du se några Config Vars som vi kommer att ställa in nu. Lägg till config vars enligt följande:

Här HASURA_GRAPHQL_ADMIN_SECRET-tangenten för att JWT-läget ska fungera. Sätt nyckeln i HASURA_GRAPHQL_JWT_SECRETmiljövariabeln. När du har lagt till detta kan GraphQL-slutpunkterna bara fråges med hjälp av Autoriseringshuvud eller X-Hasura-Admin-Secret-rubrik.

Slutligen, ställ in HASURA_GRAPHQL_UNAUTHORIZED_ROLE till anonym eftersom vi tillåter oautentiserade användare att läsa data.

Obehörig roll: används när åtkomstnyckeln inte skickas endast i åtkomstnyckelläge eller ”Autorisationshuvud” saknas i JWT-läge. Exempel: anonym. När "Autorisations" -huvudet saknas kommer förfrågningsrollen att vara "anonym".

Nästa steg är att lägga till regler i vår Auth0-app. Vi lägger till ytterligare två regler i Auth0-appen som visas nedan:

Här ersätter vi idToken med accessToken. I grund och botten tillhandahåller auth0 olika typer av tokens och auth0-spa-js avslöjar inte idToken längre, så vi kommer att använda accessToken.

Uppdatering: Från version 1.2.0 av auth0-spa-js exponeras råvärdet för idToken med getIdTokenClaims-metoden.

Läs mer om tokens här.
Den nya SPA SDK använder bara Autorisationskod Grant + PKCE (inte Implicit Grant längre) Därför måste vi använda accessTokens istället för idTokens. (Se den här tråden).

Lägg till ytterligare en regel för att synkronisera vår postgres-databas och Auth0-användare:

Ändra admin_secret och url därefter. När en ny användare registrerar sig eller en användare loggar in kommer vår hasura postgres-databas att uppdateras automatiskt för att lagra användarinformationen i vår användartabell. Se detta för mer information.

Obs: Här gör vi bara en postbegäran med grafql-mutationer, och vi har x-hasura-admin-hemlighet i rubriken, så att den inkommande begäran har full tillgång till att mutera databasen.

Vi måste också skapa ett anpassat API i Auth0 Dashboard> API: er som pekar på vårt Hasura GraphQl API. Skapa en ny api som visas nedan och ge den något namn. Byt identifierare med din grafql-slutpunkt.

Nu när vi har fått vår backend och Auth0-konfiguration kan vi komma igång med att bygga ut React-appen. Gå över till den andra delen av denna serie för att lära dig hur.

Om författaren

Abhijeet Singh är UG-student i datavetenskap och teknik från IIIT Kalyani. Han har arbetat inom Full Stack Development, Android, Deep Learning, Machine Learning och NLP. Han deltar aktivt i konkurrerande programmeringstävlingar och har intresse av att lösa algoritmiska problem. Han är en startentusiast och spelar bordtennis och gitarr på fritiden.

Ursprungligen publicerad på https://blog.hasura.io den 6 september 2019.