Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Raggruppamento TypeScript e mappe di origine per il runtime APPSYNC_JS

TypeScript migliora AWS AppSync lo sviluppo garantendo la sicurezza dei tipi e il rilevamento precoce degli errori. È possibile scrivere TypeScript codice localmente e traspilarlo JavaScript prima di utilizzarlo con il runtime. APPSYNC_JS Il processo inizia con l'installazione TypeScript e la configurazione di tsconfig.json per l'ambiente. APPSYNC_JS È quindi possibile utilizzare strumenti di raggruppamento come esbuild per compilare e raggruppare il codice. Amplify genererà CLI tipi dallo schema GraphQL, consentendoti di utilizzare questi tipi nel codice resolver.

È possibile utilizzare librerie personalizzate ed esterne nel codice del resolver e della funzione, purché soddisfino i requisiti. APPSYNC_JS Gli strumenti di raggruppamento combinano il codice in un unico file da utilizzare. AWS AppSyncÈ possibile includere mappe di origine per facilitare il debug.

Sfruttare le librerie e raggruppare il codice

Nel codice del resolver e della funzione, puoi sfruttare sia le librerie personalizzate che quelle esterne purché soddisfino i requisiti. APPSYNC_JS In questo modo è possibile riutilizzare il codice esistente nell'applicazione. Per utilizzare librerie definite da più file, è necessario utilizzare uno strumento di raggruppamento, come esbuild, per combinare il codice in un unico file che può quindi essere salvato nel AWS AppSync resolver o nella funzione.

Quando raggruppate il codice, tenete presente quanto segue:

Ad esempio, per raggruppare il codice del resolver che si trova insrc/appsync/getPost.resolver.js, puoi usare il seguente comando esbuild: CLI

$ 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

Creazione del codice e utilizzo di TypeScript

TypeScriptè un linguaggio di programmazione sviluppato da Microsoft che offre tutte JavaScript le funzionalità insieme al sistema di TypeScript digitazione. Puoi usarlo TypeScript per scrivere codice type-safe e catturare errori e bug in fase di compilazione prima di salvare il codice in. AWS AppSync Il @aws-appsync/utils pacchetto è completamente digitato.

Il APPSYNC_JS runtime non supporta TypeScript direttamente. È necessario prima trascrivere il TypeScript codice in JavaScript codice supportato dal APPSYNC_JS runtime prima di salvarlo in. AWS AppSync Puoi usarlo TypeScript per scrivere il codice nell'ambiente di sviluppo integrato locale (IDE), ma tieni presente che non puoi creare TypeScript codice nella AWS AppSync console.

Per iniziare, assicurati di averlo TypeScriptinstallato nel tuo progetto. Quindi, configurate le impostazioni di TypeScript transcompilazione in modo che funzionino con il APPSYNC_JS runtime utilizzando. TSConfig Ecco un esempio di tsconfig.json file di base che puoi usare:

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

È quindi possibile utilizzare uno strumento di raggruppamento come esbuild per compilare e raggruppare il codice. Ad esempio, dato un progetto il cui AWS AppSync codice si trova insrc/appsync, è possibile utilizzare il seguente comando per compilare e raggruppare il codice:

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

Usare il codegen Amplify

Puoi usare CLIAmplify per generare i tipi per il tuo schema. Dalla directory in cui si trova il schema.graphql file, esegui il comando seguente e consulta le istruzioni per configurare il codegen:

$  npx @aws-amplify/cli codegen add

Per rigenerare il codegen in determinate circostanze (ad esempio, quando lo schema viene aggiornato), esegui il comando seguente:

$ npx @aws-amplify/cli codegen

È quindi possibile utilizzare i tipi generati nel codice del resolver. Ad esempio, dato lo schema seguente:

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

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

type Query {
  listTodos: Todo
}

È possibile utilizzare i tipi generati nella seguente AWS AppSync funzione di esempio:

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
}

Utilizzo di farmaci generici in TypeScript

È possibile utilizzare i farmaci generici con diversi dei tipi forniti. Ad esempio, lo snippet seguente è di un tipo: Todo

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

È possibile scrivere un resolver per un abbonamento che utilizza. Todo Nel tuoIDE, le definizioni dei tipi e i suggerimenti di completamento automatico ti guideranno nell'utilizzo corretto dell'utilità di toSubscriptionFilter trasformazione:

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
}

Elencare i pacchetti

Puoi aggiungere automaticamente il linking ai tuoi pacchetti importando il plugin. esbuild-plugin-eslint È quindi possibile abilitarlo fornendo un plugins valore che abiliti le funzionalità di eslint. Di seguito è riportato un frammento che utilizza l'esbuild JavaScript API in un file chiamato: 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 })],
})

Utilizzo delle mappe di origine

Puoi fornire una mappa sorgente in linea (sourcemap) con il tuo JavaScript codice. Le mappe di origine sono utili quando si crea un pacchetto JavaScript o si TypeScript codifica e si desidera visualizzare i riferimenti ai file sorgente di input nei log e nei messaggi di errore di runtime JavaScript .

Il tuo sourcemap deve apparire alla fine del codice. È definito da una singola riga di commento che segue il seguente formato:

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

Ecco un esempio:

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

Le mappe di origine possono essere create con esbuild. L'esempio seguente mostra come utilizzare esbuild JavaScript API per includere una mappa sorgente in linea quando il codice viene creato e raggruppato:

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

In particolare, le sourcesContent opzioni sourcemap and specificano che una mappa di origine deve essere aggiunta in linea alla fine di ogni build ma non deve includere il contenuto sorgente. Per convenzione, consigliamo di non includere il contenuto sorgente nel tuosourcemap. Puoi disabilitarlo in esbuild impostando sources-content sufalse.

Per illustrare come funzionano le mappe di origine, guarda il seguente esempio in cui un codice resolver fa riferimento alle funzioni di supporto di una libreria di supporto. Il codice contiene istruzioni di registro nel codice del resolver e nella libreria helper:

. /src/default.resolver.ts (il tuo resolver)

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 file di supporto)

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

Quando create e raggruppate il file resolver, il codice del resolver includerà una mappa sorgente in linea. Quando il resolver è in esecuzione, nei log vengono visualizzate le seguenti voci: CloudWatch

Esaminando le voci del CloudWatch registro, noterai che le funzionalità dei due file sono state raggruppate e vengono eseguite contemporaneamente. Il nome originale di ogni file si riflette chiaramente anche nei log.