So erstellen Sie ein einfaches Blog mit Angular, GraphQL und Django

Unser einfacher Blog

TL; DR

Tony Spiro schrieb einen Artikel über das Erstellen eines einfachen Blogs mit React und GraphQL. In diesem Artikel zeige ich Ihnen, wie Sie mit Angular, GraphQL und Django ein einfaches Blog erstellen.

GraphQL ist eine neue Technologie zum Erstellen von APIs. Es gibt viele Tutorials darüber, wie erstaunlich GraphQL ist und was mit seiner Spezifikation ist. Die meisten von ihnen sind gute Tutorials. Ich möchte nicht weiter auf GraphQL eingehen, sondern nur erklären, wie eine API erstellt und mit dem Angular-Client verwendet wird.

Geh und baue Zeug!

Bedarf

  • Python
  • Django
  • Graphene (GraphQL-Implementierung in Python)
  • Angular

Erstellen Sie die GraphQL-API

Graphene ist eine Python-Bibliothek zum einfachen Erstellen von APIs mit GraphQL. Beginnen wir mit dem Scafolding unserer App, indem wir die folgenden Befehle ausführen:

# Erstellen Sie das Projektverzeichnis
$ mkdir einfaches Blog
$ cd simple-blog

# Erstellen Sie eine virtuelle Umgebung, um unsere Paketabhängigkeiten lokal zu isolieren
$ virtualenv -p python3.6 venv
$ source venv / bin / activate
# Installieren Sie Django und Graphene mit Django-Unterstützung
$ pip install django
$ pip install graphene_django
# Richten Sie ein neues Projekt mit einer einzigen Anwendung ein
$ django-admin.py startproject graphql_api
$ cd graphql_api
$ django-admin.py startapp blog

Jetzt können wir unsere GraphQL-API erstellen. Der erste Schritt besteht darin, unser minimalistisches Blog-Post-Modell zu definieren.

aus django.db Modelle importieren
Klasse Post (Modelle.Modell):
    title = models.CharField (max_length = 255)
    content = models.TextField ()
    created_at = models.DateTimeField (auto_now = True)

Im nächsten Schritt erstellen Sie eine Abfrage. Eine Abfrage ist eine schreibgeschützte Operation zum Abrufen von Daten.

Klasse Query (graphene.AbstractType):
    all_posts = graphene.List (PostType)
    def resolve_all_posts (self, info, * args):
        return Post.objects.all ()

API bisher testen!

Graphene wird mit GraphiQL geliefert, einer webbasierten integrierten Entwicklungsumgebung, die das Schreiben und Ausführen von GraphQL-Abfragen unterstützt.

Es ist Zeit, unsere erste Abfrage einzugeben! Lassen Sie uns unsere Beiträge abrufen.

Abfrage {
  alle Artikel {
    Ich würde
    Titel
    Inhalt
  }
}
Unsere Anfrage

Verbrauchen Sie GraphQL API mit Angular

Apollo erleichtert das Abrufen der genauen Daten, die Sie für Ihre Komponente benötigen, und ermöglicht es Ihnen, Ihre Abfragen genau dort abzulegen, wo Sie sie benötigen. Wir müssen lediglich die Pakete apollo-angular, angular-client und angular-tag installieren.

Erstellen wir eine neue Winkelanwendung mit Angular CLI.

Neue eckige App
$ cd angle-app
$ npm installiere apollo-client apollo-angular graphql-tag --save
$ Garn
$ ng dienen -o

In unserer Angular-Anwendung müssen mehrere Bibliotheken festgelegt werden.

  1. apollo-client: Ein funktionsfähiger, produktionsfertiger GraphQL-Client zum Zwischenspeichern für jeden Server oder jedes UI-Framework.
  2. Apollo-Angular: Winkelintegration für den Apollo-Client
  3. graphql-tag: Ein Literal-Tag für JavaScript-Vorlagen, das GraphQL-Abfragen analysiert.

GraphQL-Abfragen

Wenn wir eine Abfrage verwenden, können wir die Apollo.watchQuery-Methode auf sehr einfache Weise verwenden. Wir müssen unsere Abfrage einfach mit der graphql-tag-Bibliothek in ein GraphQL-Dokument zerlegen. [1]

{Injectable} aus '@ angle / core' importieren;
{Apollo, ApolloQueryObservable} aus 'apollo-angular' importieren;
gql aus 'graphql-tag' importieren;
importiere 'rxjs / add / operator / map';
const PostQuery = gql`
  Abfrage{
    alle Artikel {
      Ich würde
      Titel
      Inhalt
    }
  }
`;
@Injectable ()
Exportklasse BlogService {
  Konstruktor (privater Apollo: Apollo) {}
alles(){
    return this.apollo.watchQuery  ({query: PostQuery});
  }
}

Jetzt können wir BlogService einspritzen und unsere Blog-Posts abrufen. Unser Angular sendet Anfragen an unsere Netzwerkschnittstelle, die in unserer Datei app.module.ts angegeben ist.

{ApolloClient, createNetworkInterface} aus 'apollo-client' importieren;
const client = neuer ApolloClient ({
  networkInterface: createNetworkInterface ({
    uri: 'http://127.0.0.1:8000/graphql'
  }),
});

Jetzt können wir alle Beiträge abrufen und unsere Vorlage rendern. Die vollständige Codebasis ist auf Github.

Hoffe, dies gibt Inspiration für bessere Gebäude GraphQL API und verbrauchen es mit Angular-Anwendung: D

Wenn Sie diesen Artikel mögen, klatschen Sie bitte .

Vielen Dank!