{"id":15372,"date":"2022-08-10T15:12:53","date_gmt":"2022-08-10T13:12:53","guid":{"rendered":"https:\/\/www.centigrade.de\/?post_type=blog&p=15372"},"modified":"2022-08-11T14:36:35","modified_gmt":"2022-08-11T12:36:35","slug":"graphql-net-und-react-miteinander-verbinden-teil-iv-react-und-graphql-schnell-zusammenbringen-dank-apollo-client","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/graphql-net-und-react-miteinander-verbinden-teil-iv-react-und-graphql-schnell-zusammenbringen-dank-apollo-client\/","title":{"rendered":"GraphQL, .Net und React miteinander verbinden \u2013 Teil IV: React und GraphQL schnell zusammenbringen dank Apollo Client"},"content":{"rendered":"\r\n

Hallo! \ud83d\ude42 Ich bin Ulrike, Medieninformatik-Studentin im Master und momentan Praktikantin bei Centigrade. W\u00e4hrend meines Praxissemesters durfte ich unter anderem gemeinsam mit Mikhail<\/a> die VedaVersum-App fertigstellen. Wir wollten die Anwendung mit .NET, GraphQL und React als eine Art Wissensdatenbank bauen, in der sich Teammitglieder anmelden und Artikel verfassen, bearbeiten und l\u00f6schen k\u00f6nnen (s. Blog-Beitrag<\/a>). In diesem Teil der Beitragsserie m\u00f6chte ich mein Vorgehen bei der Anbindung des Frontends mit euch teilen und kurz berichten, wie es mir als React- und GraphQL-Neuling dabei ergangen ist.<\/p>\r\n\r\n\r\n\r\n

R\u00fcckblick: .NET, GraphQL und MongoDB<\/h2>\r\n\r\n\r\n\r\n

Im ersten Blog-Beitrag<\/a> hat euch Mikhail gezeigt, wie man eine GraphQL-API mit .Net erstellt und zur Unterst\u00fctzung Hot Chocolate<\/a> von ChilliCream<\/a> als GraphQL Server gew\u00e4hlt. Das von ChilliCream mitgelieferte Hilfsprogramm Banana Cake Pop<\/a> zum \u00dcberpr\u00fcfen von GraphQL-Anfragen wird uns auch sp\u00e4ter noch von Nutzen sein, wenn wir unsere Anfragen vom Frontend isoliert testen. Im Folgebeitrag<\/a> haben wir uns ganz auf die Backend-Authentifizierung am Beispiel von GitLab konzentriert und im letzten Beitrag<\/a> f\u00fcr die Gew\u00e4hrleistung der Datenpersistenz MongoDB zum Backend hinzugef\u00fcgt.<\/p>\r\n\r\n\r\n\r\n

In diesem Beitrag werden wir GraphQL-Anfragen in JavaScript schreiben und diese mittels der Apollo Client Library in unser React-Frontend integrieren.<\/p>\r\n\r\n\r\n\r\n

Ein wichtiger Hinweis zum Code auf Github<\/a>: W\u00e4hrend wir an dieser Beitragsserie f\u00fcr unseren Blog schreiben, wurde und wird an VedaVersum weitergearbeitet. Dementsprechend gibt es \u2013 wie meistens beim Entwickeln von Software \u2013 immer wieder gr\u00f6\u00dfere und kleinere Umbauten und Umbenennungen. Beispielsweise wurde inzwischen die VedaVersumCard <\/em>zum VedaVersumArticle.<\/em><\/p>\r\n\r\n\r\n\r\n

Frontend mit React, Tailwind CSS und Apollo Client<\/h2>\r\n\r\n\r\n\r\n

F\u00fcr die Implementierung des Frontends verwenden wir folgende Technologien:<\/p>\r\n

\"Logos<\/p>\r\n\r\n\r\n\r\n

Wie schon im ersten Blog-Beitrag<\/a> ausf\u00fchrlich beschrieben, haben wir uns f\u00fcr React<\/strong><\/a> entschieden, weil es leichtgewichtiger (User Interface Library<\/em>) ist als Angular (User Interface Framework<\/em>).<\/p>\r\n\r\n\r\n\r\n

Tailwind CSS<\/strong><\/a> ist ein CSS-Framework, das den \u201eUtility first\u201c-Ansatz verfolgt. Den Ansto\u00df, uns mit diesem Thema auseinander zu setzen, gab uns ein Blogartikel<\/a> von frontstuff.io<\/a>. Wir haben uns aus folgenden Gr\u00fcnden f\u00fcr TailwindCSS entschieden: F\u00fcr unsere kleine Anwendung wollten wir nichts Schwergewichtiges wie z. B. Bootstrap. Zus\u00e4tzlich werden die Anforderungen an unsere Anwendung und damit auch ihr Design und Layout kontinuierlich \u00fcberarbeitet. Mit Tailwind CSS ist es m\u00f6glich, diese \u00c4nderungen schnell direkt in HTML umzusetzen.
Da eine ausf\u00fchrliche Er\u00f6rterung des Frameworks und \u201eUtility first\u201c den Umfang des Blogbeitrags sprengen w\u00fcrde, gehe ich nur der Vollst\u00e4ndigkeit halber kurz darauf ein.<\/p>\r\n\r\n\r\n\r\n

Apollo Client<\/strong><\/a> ist eine open source JavaScript Library f\u00fcr die Datenverwaltung mit GraphQL. Wir haben f\u00fcr unser Projekt diese Library gew\u00e4hlt, weil Apollo Client h\u00e4ufig eingesetzt wird, gut dokumentiert ist und sehr viel Logik selbstst\u00e4ndig \u201eabarbeitet\u201c. Beispielsweise m\u00fcssen Fehler bei der Datenabfrage nicht manuell implementiert werden, sondern Apollo Client sendet sie direkt mit und wir m\u00fcssen uns nur noch darum k\u00fcmmern, was im Fehlerfall passieren soll.<\/p>\r\n\r\n\r\n\r\n

VedaVersum \u2013 Eine React-Anwendung, die \u00fcber Apollo Client mit dem GraphQL-Backend kommuniziert<\/h2>\r\n\r\n\r\n\r\n

Nachdem wir die Anforderungen an die VedaVersum-App f\u00fcr die Ver\u00f6ffentlichung des Blog-Beitrags noch einmal \u00fcberarbeitet haben, enth\u00e4lt die fertige Anwendung im ersten \u201eMinimum Viable Product<\/a>\u201c folgende Features:<\/p>\r\n\r\n\r\n\r\n