Creación de una aplicación cliente

Puedes conectarte a tu API de AWS AppSync GraphQL mediante cualquier cliente de GraphQL, pero te recomendamos encarecidamente el cliente Amplify. Amplify no solo genera automáticamente SDK de cliente fuertemente tipados para su API GraphQL, 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 npm y la CLI de Amazon 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 en la configuración de tu API 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á el esquema de la API y, de forma predeterminada, generará el código auxiliar del cliente en la src/graphql carpeta. Después de cada implementación de API, 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 ./