Création d'une application cliente à l'aide du client Amplify - AWS AppSync

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Création d'une application cliente à l'aide du client Amplify

Vous pouvez vous connecter à votre AWS AppSync GraphQL à API l'aide de n'importe quel client GraphQL, mais nous recommandons vivement le client Amplify v6. Amplify génère non seulement automatiquement un client fortement typé pour SDKs votre GraphQL, API mais offre également la prise en charge des données en temps réel et des fonctionnalités de requête GraphQL améliorées dans les applications clientes. Pour les applications Web, Amplify peut produire un JavaScript client. Pour ceux qui ciblent des environnements multiplateformes ou mobiles, Amplify s'adresse à Android, iOS et React Native. Pour en savoir plus sur la génération de code client pour ces plateformes, consultez la documentation Amplify. Voici un guide pour démarrer votre voyage avec une application JavaScript React :

Note

Vous devez installer et configurer à la fois npm et Amazon CLI avant de commencer. Si vous utilisez le client Amplify v6, suivez ce guide.

Mise en route :

  1. Sur votre machine locale, accédez au répertoire de votre projet. Installez la bibliothèque Amplify à l'aide de la commande ci-dessous :

    npm install aws-amplify

  2. Téléchargez votre fichier de configuration et placez-le dans le dossier de votre projet. Votre fichier de configuration contient généralement une config variable dont certains paramètres (point de terminaison, région, mode d'autorisation, etc.) sont définis. Par exemple, cela peut ressembler à ceci :

    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. Dans votre code, importez la bibliothèque Amplify et votre configuration pour configurer Amplify :

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

Amplify.configure(config);

    Vous pouvez également utiliser l'extrait de code dans votre API configuration pour configurer Amplify directement :

    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. À l'aide de la chaîne d'outils Amplify, vous avez la possibilité de générer automatiquement des opérations en fonction de votre schéma, ce qui vous évite d'avoir à créer des scripts manuels. Dans le répertoire racine de votre application, utilisez la CLI commande suivante :

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

    Cela téléchargera votre API schéma et, par défaut, générera du code d'assistance client dans le src/graphql dossier. Après chaque API déploiement, vous pouvez réexécuter la commande suivante pour générer des instructions et des types GraphQL mis à jour :

    npx @aws-amplify/cli codegen

  5. Vous pouvez désormais générer des modèles pour Android, Swift, Flutter et JavaScript DataStore. Utilisez la commande suivante pour télécharger votre schéma :

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

    Exécutez ensuite la commande suivante depuis le répertoire racine de votre application :

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