Hintergrund

Ich wagte es, mit Neo4J und GraphQL einen Social-Media- Grapher zu bauen . Zu diesem Zeitpunkt bin ich auf den GRAND- Stack gestoßen . Der Einstieg in Neo4J war recht einfach, aber Neo4j mit React, GraphQL und Typescript zum Laufen zu bringen, war eine andere Geschichte.

Ich hoffe, dieser Artikel hilft denjenigen, die sich für den GRAND- Stack interessieren , und erleichtert den Einrichtungsprozess ein wenig. Ich habe ein voll funktionsfähiges Projekt auf meinem Github ( hier ), das Sie gerne als Referenz ansehen können.

Technologien

1. GraphQL + Apollo
2. Express JS
3. Reagiere JS
4. Neo4j
5. Neovis (neo4J Client Visualizer)
6. Typoskript
7. Webpack

Der schwierigste Teil beim Einrichten des Servers war die eingeschränkte Dokumentation zur Verwendung von GRAND mit Typescript. Besonders die Web-Pack-Einstellungen. Dies sind meine endgültigen Einstellungen:

Wie Sie sehen können, habe ich einige Umgebungsvariablen, die ich im Frontend für Neo4J verwende. Sie benötigen außerdem eine tsconfig-Datei.

Die obigen Einstellungen sind eine Kombination aus Versuch und Irrtum und verwenden das, was andere Leute in der Vergangenheit getan haben, aber sie decken alle Grundlagen ab.

Serverkonfiguration

Für meinen Server habe ich Apollo Server, GraphQL, Express und Neo4J Treiber verwendet. Es gibt unzählige Tutorials zum Einrichten von GraphQL mit Neo4j, aber ich fand zwei Bibliotheken am nützlichsten.

1. neo4j-graphql-js
2. Apollo-Server-Express

Durch die Definition meines Schemas hatte ich Zugriff auf Abfragen und Mutationen wie:

1. Benutzer abrufen
2. Tweets holen
3. Benutzer zu Tweets hinzufügen
4. Fügen Sie Benutzern einen Tweet hinzu
5. Holen Sie sich Benutzer-Tweets

Reagieren

Wir haben das G, das A und das ND (Neo4J Database ) von GRAND behandelt, aber wir können das R nicht vergessen. Das ist schließlich alles, was für unsere Benutzer wichtig ist. Um mein Neo4j-Backend zu visualisieren, habe ich eine Bibliothek namens Neovis verwendet, die natürlich nicht für die Verwendung mit React optimiert wurde.

Aber bevor ich etwas zeigen konnte, musste ich einige Daten erstellen. Ich habe ein einfaches Formular erstellt, in das ein Benutzer seinen Namen eingeben kann, sowie einen Tweet. Ich würde dann eine Mutation machen, die diese Daten in meiner Neo4j-Datenbank speichert.

Aufgrund dieser ' magischen ' Methoden, die von unserer Backend-Bibliothek erstellt wurden, können wir problemlos Benutzer und Tweets erstellen und einander zuweisen. Hier ist ein Beispiel für eine Mutation, mit der ich einen neuen Tweet erstellt und einem Benutzer zugewiesen habe.

Sowohl CreateTweet als auch AddUserTweets wurden von unseren Neo4j-GraphQL-Bibliotheken für mich automatisch generiert.

Zusammenfassung

Die größte Herausforderung bestand darin, all dies einzurichten UND Typescript damit zu verwenden. Ich liebe den Stack und hoffe, ihn in Zukunft wieder zu verwenden. Das Potenzial ist immens, selbst für ein kleines Projekt wie das meine, ich kann mir keinen anderen Stack vorstellen, der Graphendatenbanken und Abfragen so gut kombiniert wie der GRAND- Stack.

Wie ich bereits erwähnt habe, habe ich ein voll funktionsfähiges Beispiel für meinen Github. Vielen Dank für das Lesen und viel Spaß beim Codieren!