As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Agrupamento e mapas de origem para TypeScript o tempo de execução do APPSYNC_JS

TypeScript aprimora AWS AppSync o desenvolvimento fornecendo segurança de tipos e detecção precoce de erros. Você pode escrever TypeScript código localmente e transpilá-lo JavaScript antes de usá-lo com o APPSYNC_JS tempo de execução. O processo começa com a instalação TypeScript e configuração do tsconfig.json para o ambiente. APPSYNC_JS Em seguida, é possível utilizar ferramentas de empacotamento, como a esbuild, para compilar e empacotar o código. A CLI do Amplify gerará tipos do esquema GraphQL, permitindo que você use esses tipos no código do resolvedor.

No seu resolvedor e código de função, você pode aproveitar bibliotecas personalizadas e externas, desde que estejam em conformidade com os requisitos do APPSYNC_JS. As ferramentas de agrupamento combinam código em um único arquivo para uso em AWS AppSync. Os mapas de origem podem ser incluídos para ajudar na depuração.

Aproveitar as bibliotecas e empacotar seu código

No seu resolvedor e código de função, você pode aproveitar bibliotecas personalizadas e externas, desde que estejam em conformidade com os requisitos de APPSYNC_JS. Isso possibilita a reutilização do código existente na sua aplicação. Para usar bibliotecas definidas por vários arquivos, você deve usar uma ferramenta de agrupamento, como esbuild, para combinar seu código em um único arquivo que pode ser salvo em seu AWS AppSync resolvedor ou função.

Ao empacotar o código, lembre-se do seguinte:

Por exemplo, para empacotar o código do resolvedor localizado em src/appsync/getPost.resolver.js, é possível usar o seguinte comando 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

Construindo seu código e trabalhando com TypeScript

TypeScripté uma linguagem de programação desenvolvida pela Microsoft que oferece todos os JavaScript recursos junto com o sistema de TypeScript digitação. Você pode usar TypeScript para escrever código de tipo seguro e detectar erros e bugs no momento da compilação antes de salvar seu código no. AWS AppSync O pacote @aws-appsync/utils está totalmente inserido.

O APPSYNC_JS tempo de execução não oferece suporte TypeScript direto. Você deve primeiro transpilar seu TypeScript código em código compatível com JavaScript o APPSYNC_JS tempo de execução antes de salvá-lo. AWS AppSync Você pode usar TypeScript para escrever seu código em seu ambiente de desenvolvimento integrado (IDE) local, mas observe que não é possível criar TypeScript código no AWS AppSync console.

Para começar, certifique-se de ter TypeScript instalado em seu projeto. Em seguida, defina suas configurações de TypeScript transcompilação para trabalhar com o APPSYNC_JS tempo de execução usando TSConfig. Aqui está um exemplo de um arquivo básico tsconfig.json que você pode usar:

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

Em seguida, é possível utilizar uma ferramenta de empacotamento como esbuild para compilar e agrupar seu código. Por exemplo, considerando um projeto com seu AWS AppSync código localizado emsrc/appsync, você pode usar o seguinte comando para compilar e agrupar seu 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

Usar o codegen Amplify

Você pode usar a CLI do Amplify para gerar os tipos para seu esquema. No diretório em que seu arquivo schema.graphql está localizado, execute o comando a seguir e revise os prompts para configurar seu codegen:

$  npx @aws-amplify/cli codegen add

Para regenerar seu codegen em determinadas circunstâncias (por exemplo, quando seu esquema é atualizado), execute o seguinte comando:

$ npx @aws-amplify/cli codegen

Em seguida, é possível usar os tipos gerados no código do resolvedor. Por exemplo, considerando o seguinte esquema:

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

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

type Query {
  listTodos: Todo
}

Você pode usar os tipos gerados na seguinte AWS AppSync função de exemplo:

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
}

Usando genéricos em TypeScript

Você pode usar genéricos com vários dos tipos fornecidos. Por exemplo, o trecho abaixo é do tipo Todo:

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

Você pode escrever um resolvedor para uma assinatura que use Todo. No seu IDE, as definições de tipo e as dicas de preenchimento automático orientarão você a usar corretamente o utilitário de transformação 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
}

Usar Lint nos seus pacotes

Você pode filtrar automaticamente seus pacotes importando o plug-in esbuild-plugin-eslint. Em seguida, você pode ativá-lo fornecendo um valor plugins que ative os recursos do eslint. Abaixo está um trecho que usa a JavaScript API esbuild em um arquivo chamado: 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 })],
})

Usar mapas de origem

Você pode fornecer um mapa fonte embutido (sourcemap) com seu JavaScript código. Os mapas de origem são úteis quando você agrupa JavaScript ou TypeScript codifica e deseja ver referências aos seus arquivos de origem de entrada em seus registros e mensagens de JavaScript erro de tempo de execução.

Seu sourcemap deve aparecer no final do seu código. Ele é definido por uma única linha de comentário que segue o seguinte formato:

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

Veja um exemplo abaixo:

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

Os mapas de origem podem ser criados com o esbuild. O exemplo abaixo mostra como usar a JavaScript API esbuild para incluir um mapa-fonte embutido quando o código é criado e agrupado:

/* 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 })],
})

Em particular, as opções sourcesContent e sourcemap especificam que um mapa de origem deve ser adicionado in-line no final de cada compilação, mas não deve incluir o conteúdo de origem. Como convenção, recomendamos não incluir o conteúdo de origem em sourcemap. É possível desativar isso no esbuild definindo sources-content como false.

Para ilustrar como os mapas de origem funcionam, revise o exemplo a seguir em que um código de resolvedor faz referência a funções de ajuda de uma biblioteca de ajuda. O código contém instruções de log no código do resolvedor e na biblioteca de ajuda:

. /src/default.resolver.ts (seu resolvedor)

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 (um arquivo 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..')
}

Ao criar e empacotar o arquivo resolvedor, seu código do resolvedor incluirá um mapa de origem in-line. Quando seu resolvedor é executado, as seguintes entradas aparecem nos CloudWatch registros:

Observando as entradas no CloudWatch registro, você notará que a funcionalidade dos dois arquivos foi agrupada e está sendo executada simultaneamente. O nome do arquivo original de cada arquivo também é claramente refletido nos registros.