Creación de una aplicación cliente mediante el cliente Amplify - AWS AppSync

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Creación de una aplicación cliente mediante el cliente Amplify

Puedes conectarte a tu AWS AppSync GraphQL API mediante cualquier cliente GraphQL, pero te recomendamos encarecidamente el cliente Amplify v6. Amplify no solo genera automáticamente un cliente fuertemente tipado para SDKs su GraphQL, API sino que también ofrece soporte para datos en tiempo real y capacidades de consulta de GraphQL mejoradas en aplicaciones cliente. Para aplicaciones web, Amplify puede crear un JavaScript cliente. Para aquellos que buscan entornos multiplataforma o móviles, Amplify es compatible con Android, iOS y React Native. Para profundizar en la generación de código de cliente para estas plataformas, consulte la documentación de Amplify. Aquí tienes una guía para empezar tu viaje con una aplicación de JavaScript React:

nota

Debe instalar y configurar tanto npm como Amazon CLI antes de empezar. Si utilizas el cliente Amplify v6, sigue esta guía.

Primeros pasos:

  1. En su máquina local, navegue hasta el directorio del proyecto. Instale la biblioteca Amplify mediante el comando siguiente:

    npm install aws-amplify

  2. Descargue el archivo de configuración y colóquelo en la carpeta de su proyecto. El archivo de configuración suele contener una config variable con algunos ajustes (punto final, región, modo de autorización, etc.) definidos. Por ejemplo, podría tener este aspecto:

    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. En tu código, importa la biblioteca de Amplify y tu configuración para configurar Amplify:

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

Amplify.configure(config);

    Como alternativa, usa el fragmento de código de tu API configuración para configurar Amplify directamente:

    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. Con la cadena de herramientas de Amplify, tiene la opción de generar automáticamente las operaciones en función de su esquema, lo que le ahorra el esfuerzo de crear secuencias de comandos manuales. En el directorio raíz de la aplicación, utilice el siguiente comando: CLI

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

    Esto descargará tu esquema y, API de forma predeterminada, generará el código auxiliar del cliente en la src/graphql carpeta. Después de cada API implementación, puedes volver a ejecutar el siguiente comando para generar sentencias y tipos de GraphQL actualizados:

    npx @aws-amplify/cli codegen

  5. Ahora puedes generar modelos para Android, Swift, Flutter y. JavaScript DataStore Usa el siguiente comando para descargar tu esquema:

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

    A continuación, ejecuta el siguiente comando desde el directorio raíz de la aplicación:

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