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.

Paquetes y mapas fuente para TypeScript el tiempo de ejecución de APPSYNC_JS

TypeScript mejora el AWS AppSync desarrollo al proporcionar seguridad tipográfica y una detección temprana de errores. Puede escribir TypeScript código localmente y transpilarlo JavaScript antes de usarlo con el APPSYNC_JS motor de ejecución. El proceso comienza con la instalación TypeScript y configuración de tsconfig.json para el entorno. APPSYNC_JS A continuación, puede usar herramientas de agrupación como esbuild para compilar y agrupar el código. La CLI de Amplify generará tipos a partir del esquema de GraphQL, lo que permite usar dichos tipos en el código del solucionador.

Puede usar bibliotecas personalizadas y externas en el código de solucionador y función, siempre que cumplan los requisitos de APPSYNC_JS. Las herramientas de empaquetado combinan el código en un solo archivo para usarlo en. AWS AppSync Los mapas de origen se pueden incluir para facilitar la depuración.

Uso de bibliotecas y agrupación del código

En su código de solucionador y función, puede utilizar bibliotecas personalizadas y externas siempre que cumplan los requisitos de APPSYNC_JS. Esto permite reutilizar el código existente en su aplicación. Para usar bibliotecas definidas por varios archivos, debes usar una herramienta de empaquetado, como esbuild, para combinar el código en un solo archivo que luego se pueda guardar en tu AWS AppSync resolución o función.

Al agrupar el código, tenga en cuenta lo siguiente:

Por ejemplo, para agrupar el código de solucionador ubicado en src/appsync/getPost.resolver.js, puede usar el siguiente comando de la CLI esbuild:

$ esbuild --bundle \
--sourcemap=inline \
--sources-content=false \
--target=esnext \
--platform=node \
--format=esm \
--external:@aws-appsync/utils \
--outdir=out/appsync \
 src/appsync/getPost.resolver.js

Cómo crear tu código y trabajar con él TypeScript

TypeScriptes un lenguaje de programación desarrollado por Microsoft que ofrece todas JavaScript las funciones junto con el sistema de TypeScript escritura. Puedes usarlo TypeScript para escribir código de escritura segura y detectar errores y fallos en el momento de la compilación antes de guardar el código en él. AWS AppSync El paquete @aws-appsync/utils está completamente escrito.

El APPSYNC_JS tiempo de ejecución no es compatible TypeScript directamente. Primero debes transpilar el TypeScript código para JavaScript convertirlo en un código compatible con el APPSYNC_JS motor de ejecución antes de guardarlo en él. AWS AppSync Puedes usarlo TypeScript para escribir código en tu entorno de desarrollo integrado (IDE) local, pero ten en cuenta que no puedes crear TypeScript código en la AWS AppSync consola.

Para empezar, asegúrate de haberlo TypeScript instalado en tu proyecto. A continuación, configure los ajustes de TypeScript transcompilación para que funcionen con el APPSYNC_JS motor de ejecución mediante https://www.typescriptlang.org/tsconfig TSConfig. Este es un ejemplo de un archivo tsconfig.json básico que puede usar:

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
   "noEmit": true,
   "moduleResolution": "node",
  }
}

A continuación, puede usar una herramienta de agrupación como esbuild para compilar y agrupar el código. Por ejemplo, si se trata de un proyecto con tu AWS AppSync código ubicado ensrc/appsync, puedes usar el siguiente comando para compilar y empaquetar tu código:

$ esbuild --bundle \
--sourcemap=inline \
--sources-content=false \
--target=esnext \
--platform=node \
--format=esm \
--external:@aws-appsync/utils \
--outdir=out/appsync \
 src/appsync/**/*.ts

Uso de CodeGen de Amplify

Puede usar la CLI de Amplify a fin de generar los tipos para su esquema. En el directorio donde se encuentra su archivo schema.graphql, ejecute el siguiente comando y revise las instrucciones para configurar el CodeGen:

$  npx @aws-amplify/cli codegen add

Para regenerar el CodeGen en determinadas circunstancias (por ejemplo, cuando se actualiza el esquema), ejecute el siguiente comando:

$ npx @aws-amplify/cli codegen

A continuación, puede usar los tipos generados en el código de solucionador. Por ejemplo, en el caso del esquema siguiente:

type Todo {
  id: ID!
  title: String!
  description: String
}

type Mutation {
  createTodo(title: String!, description: String): Todo
}

type Query {
  listTodos: Todo
}

Puedes usar los tipos generados en la siguiente AWS AppSync función de ejemplo:

import { Context, util } from '@aws-appsync/utils'
import * as ddb from '@aws-appsync/utils/dynamodb'
import { CreateTodoMutationVariables, Todo } from './API' // codegen

export function request(ctx: Context<CreateTodoMutationVariables>) {
	ctx.args.description = ctx.args.description ?? 'created on ' + util.time.nowISO8601()
	return ddb.put<Todo>({ key: { id: util.autoId() }, item: ctx.args })
}

export function response(ctx) {
	return ctx.result as Todo
}

Uso de genéricos en TypeScript

Puede usar genéricos con varios de los tipos proporcionados. Por ejemplo, el siguiente fragmento de código es un tipo Todo:

export type Todo = {
  __typename: "Todo",
  id: string,
  title: string,
  description?: string | null,
};

Puede escribir un solucionador para una suscripción que haga uso de Todo. En su IDE, las definiciones de tipo y las sugerencias de autocompletar servirán como guía para utilizar correctamente la utilidad de transformación toSubscriptionFilter:

import { util, Context, extensions } from '@aws-appsync/utils'
import { Todo } from './API'

export function request(ctx: Context) {
  return {}
}

export function response(ctx: Context) {
  const filter = util.transform.toSubscriptionFilter<Todo>({
    title: { beginsWith: 'hello' },
    description: { contains: 'created' },
  })
  extensions.setSubscriptionFilter(filter)
  return null
}

Análisis de sus paquetes

Puede analizar sus paquetes automáticamente mediante la importación del complemento esbuild-plugin-eslint. Después, puede habilitarlo proporcionando un valor plugins que habilite las capacidades de eslint. A continuación se muestra un fragmento que usa la JavaScript API esbuild en un archivo llamado: build.mjs

/* eslint-disable */
import { build } from 'esbuild'
import eslint from 'esbuild-plugin-eslint'
import glob from 'glob'
const files = await glob('src/**/*.ts')

await build({
  format: 'esm',
  target: 'esnext',
  platform: 'node',
  external: ['@aws-appsync/utils'],
  outdir: 'dist/',
  entryPoints: files,
  bundle: true,
  plugins: [eslint({ useEslintrc: true })],
})

Uso de mapas de origen

Puedes proporcionar un mapa fuente en línea (sourcemap) con tu código. JavaScript Los mapas fuente son útiles cuando empaquetas JavaScript o TypeScript codificas y quieres ver las referencias a tus archivos fuente de entrada en tus registros y mensajes de JavaScript error en tiempo de ejecución.

Su sourcemap debe aparecer al final del código. Se define mediante una única línea de comentario que sigue el siguiente formato:

//# sourceMappingURL=data:application/json;base64,<base64 encoded string>

A continuación se muestra un ejemplo:

//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsibGliLmpzIiwgImNvZGUuanMiXSwKICAibWFwcGluZ3MiOiAiO0FBQU8sU0FBUyxRQUFRO0FBQ3RCLFNBQU87QUFDVDs7O0FDRE8sU0FBUyxRQUFRLEtBQUs7QUFDM0IsU0FBTyxNQUFNO0FBQ2Y7IiwKICAibmFtZXMiOiBbXQp9Cg==

Los mapas de origen se pueden crear con esbuild. En el siguiente ejemplo, se muestra cómo usar la JavaScript API de esbuild para incluir un mapa fuente en línea cuando se compila y se empaqueta el código:

/* eslint-disable */
import { build } from 'esbuild'
import eslint from 'esbuild-plugin-eslint'
import glob from 'glob'
const files = await glob('src/**/*.ts')

await build({
  sourcemap: 'inline',
  sourcesContent: false,
  
  format: 'esm',
  target: 'esnext',
  platform: 'node',
  external: ['@aws-appsync/utils'],
  outdir: 'dist/',
  entryPoints: files,
  bundle: true,
  plugins: [eslint({ useEslintrc: true })],
})

En concreto, las opciones sourcemap y sourcesContent especifican que se debe añadir un mapa de origen en línea al final de cada compilación, pero no debe incluir el contenido de origen. Por convención, se recomienda no incluir el contenido de origen en el sourcemap. Establezca sources-content en false para deshabilitarlo en esbuild.

Para ilustrar el funcionamiento de los mapas de origen, revise el siguiente ejemplo, en el que un código de solucionador hace referencia a funciones auxiliares de una biblioteca auxiliar. El código contiene instrucciones de registro en el código de solucionador y en la biblioteca auxiliar:

. /src/default.resolver.ts (tu solucionador)

import { Context } from '@aws-appsync/utils'
import { hello, logit } from './helper'

export function request(ctx: Context) {
  console.log('start >')
  logit('hello world', 42, true)
  console.log('< end')
  return 'test'
}

export function response(ctx: Context): boolean {
  hello()
  return ctx.prev.result
}

. src/helper.ts (un archivo auxiliar)

export const logit = (...rest: any[]) => {
  // a special logger
  console.log('[logger]', ...rest.map((r) => `<${r}>`))
}

export const hello = () => {
  // This just returns a simple sentence, but it could do more.
  console.log('i just say hello..')
}

Al compilar y agrupar el archivo de resolución, el código de solucionador incluirá un mapa de origen en línea. Cuando se ejecuta el solucionador, aparecen las siguientes entradas en los CloudWatch registros:

Al observar las entradas del CloudWatch registro, observará que las funciones de los dos archivos se han agrupado y se están ejecutando simultáneamente. El nombre original de cada archivo también aparece claramente reflejado en los registros.