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 e mappe di origine per il runtime APPSYNC_JS TypeScript

TypeScript migliora AWS AppSync lo sviluppo fornendo la sicurezza dei tipi e il rilevamento precoce degli errori. È possibile scrivere TypeScript codice localmente e trasferirlo JavaScript prima di utilizzarlo con il APPSYNC_JS runtime. 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. L'Amplify CLI genererà tipi dallo schema GraphQL, consentendoti di utilizzare questi tipi nel codice resolver.

Puoi sfruttare librerie personalizzate ed esterne nel tuo resolver e nel codice funzione, purché siano conformi ai requisiti. APPSYNC_JS Gli strumenti di raggruppamento combinano il codice in un unico file da utilizzare in. AWS AppSync Le mappe di origine possono essere incluse per facilitare il debug.

Sfruttare le librerie e raggruppare il codice

Nel tuo resolver e nel codice funzionale, puoi sfruttare sia le librerie personalizzate che quelle esterne, purché siano conformi ai 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 disponibile insrc/appsync/getPost.resolver.js, puoi utilizzare 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 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 rilevare errori e bug in fase di compilazione prima di salvare il codice. AWS AppSync Il @aws-appsync/utils pacchetto è completamente digitato.

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

Per iniziare, assicurati di averlo TypeScript installato nel tuo progetto. Quindi, configura 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",
  }
}

Puoi quindi 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, puoi usare 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 utilizzare la CLI di Amplify per generare i tipi per il tuo schema. Dalla directory in cui si trova il schema.graphql file, esegui il comando seguente ed esamina 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 seguente comando:

$ npx @aws-amplify/cli codegen

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

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 generici in TypeScript

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

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

Puoi scrivere un resolver per un abbonamento che utilizza. Todo Nel tuo IDE, le definizioni dei tipi e i suggerimenti per il completamento automatico ti guideranno nell'uso corretto dell'utilità di trasformazione: 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
}

Elencare i tuoi pacchetti

Puoi lint automaticamente i tuoi pacchetti importando il plugin. esbuild-plugin-eslint Puoi quindi abilitarlo fornendo un plugins valore che abiliti le funzionalità eslint. Di seguito è riportato uno snippet che utilizza l' JavaScript API esbuild 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 esegue il bundle JavaScript o si TypeScript codifica e si desidera visualizzare i riferimenti ai file sorgente di input nei log e nei messaggi di JavaScript errore di runtime.

sourcemapDevi 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 l' JavaScriptAPI esbuild 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 riga alla fine di ogni build ma non deve includere il contenuto sorgente. Come convenzione, ti 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, esaminate il seguente esempio in cui un codice resolver fa riferimento a funzioni di supporto di una libreria di supporto. Il codice contiene istruzioni di log nel codice 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 si crea e si raggruppa il file resolver, il codice del resolver includerà una mappa sorgente in linea. Quando il resolver viene eseguito, nei log vengono visualizzate le seguenti voci: CloudWatch

Guardando 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 registri.