Erstellen einer Client-Anwendung mit dem Amplify-Client - AWS AppSync

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Erstellen einer Client-Anwendung mit dem Amplify-Client

Sie können mit jedem AWS AppSync GraphQL-Client eine Verbindung zu Ihrem GraphQL API herstellen, aber wir empfehlen dringend den Amplify v6-Client. Amplify generiert nicht nur automatisch stark typisierte Clients SDKs für Ihr GraphQL, API sondern bietet auch Unterstützung für Echtzeitdaten und erweiterte GraphQL-Abfragefunktionen in Client-Anwendungen. Für Webanwendungen kann Amplify einen JavaScript Client erstellen. Für diejenigen, die auf plattformübergreifende oder mobile Umgebungen abzielen, bietet Amplify Android, iOS und React Native. Weitere Informationen zur Generierung von Client-Code für diese Plattformen finden Sie in der Amplify-Dokumentation. Hier ist eine Anleitung, mit der Sie Ihre Reise mit einer JavaScript React-Anwendung beginnen können:

Anmerkung

Sie müssen sowohl npm als auch Amazon installieren und konfigurieren, CLI bevor Sie beginnen können. Wenn Sie den Amplify v6-Client verwenden, folgen Sie dieser Anleitung.

Erste Schritte:

  1. Navigieren Sie auf Ihrem lokalen Computer zum Verzeichnis Ihres Projekts. Installieren Sie die Amplify-Bibliothek mit dem folgenden Befehl:

    npm install aws-amplify

  2. Laden Sie Ihre Konfigurationsdatei herunter und platzieren Sie sie in Ihrem Projektordner. Ihre Konfigurationsdatei enthält normalerweise eine config Variable, in der einige Einstellungen (Endpunkt, Region, Autorisierungsmodus usw.) definiert sind. Sie könnte zum Beispiel so aussehen:

    const config =  {
    API: {
        GraphQL: {
          endpoint: 'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-west-2.amazonaws.com/graphql',
          region: 'us-west-2',
          defaultAuthMode: 'apiKey',
          apiKey: ''
        }
    }
};

export default config;

  3. Importieren Sie in Ihrem Code die Amplify-Bibliothek und Ihre Konfiguration, um Amplify einzurichten:

    import { Amplify } from 'aws-amplify';
import config from './aws-exports.js';

Amplify.configure(config);

    Verwenden Sie alternativ das Snippet in Ihrer API Konfiguration, um Amplify direkt einzurichten:

    import { Amplify } from 'aws-amplify';

Amplify.configure({
  API: {
    GraphQL: {
      endpoint: 'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-west-2.amazonaws.com/graphql',
      region: 'us-west-2',
      defaultAuthMode: 'apiKey',
      apiKey: ''
    }
  }
});

  4. Mit der Amplify-Toolchain haben Sie die Möglichkeit, Operationen auf der Grundlage Ihres Schemas automatisch zu generieren, was Ihnen den Aufwand manueller Skripterstellung erspart. Verwenden Sie im Stammverzeichnis Ihrer Anwendung den folgenden Befehl: CLI

    npx @aws-amplify/cli codegen add --apiId <id goes here> --region <region goes here>

    Dadurch wird Ihr API Schema heruntergeladen und standardmäßig Client-Hilfscode in den src/graphql Ordner generiert. Nach jeder API Bereitstellung können Sie den folgenden Befehl erneut ausführen, um aktualisierte GraphQL-Anweisungen und -Typen zu generieren:

    npx @aws-amplify/cli codegen

  5. Sie können jetzt Modelle für Android, Swift, Flutter und generieren. JavaScript DataStore Verwenden Sie den folgenden Befehl, um Ihr Schema herunterzuladen:

    aws appsync get-introspection-schema --api-id <id goes here> --region <region goes here> --format SDL schema.graphql

    Führen Sie dann den folgenden Befehl im Stammverzeichnis Ihrer Anwendung aus:

    npx @aws-amplify/cli codegen models \
--model-schema schema.graphql \
--target [android|ios|flutter|javascript|typescript] \
--output-dir ./