Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Regroupement et cartes sources pour l'environnement d'exécution APPSYNC_JS TypeScript

TypeScript améliore AWS AppSync le développement en garantissant la sécurité des types et la détection précoce des erreurs. Vous pouvez écrire TypeScript du code localement et le transpiler JavaScript avant de l'utiliser avec le APPSYNC_JS moteur d'exécution. Le processus commence par l'installation TypeScript et la configuration de tsconfig.json pour l'environnement. APPSYNC_JS Vous pouvez ensuite utiliser des outils de regroupement tels que esbuild pour compiler et regrouper le code. L'Amplify CLI génère des types à partir du schéma GraphQL, ce qui vous permet d'utiliser ces types dans le code du résolveur.

Vous pouvez utiliser des bibliothèques personnalisées et externes dans votre résolveur et votre code de fonction, à condition qu'elles soient conformes aux APPSYNC_JS exigences. Les outils de regroupement combinent le code dans un seul fichier à utiliser dans AWS AppSync. Des cartes sources peuvent être incluses pour faciliter le débogage.

Tirer parti des bibliothèques et regrouper votre code

Dans votre résolveur et votre code de fonction, vous pouvez exploiter à la fois des bibliothèques personnalisées et externes, à condition qu'elles soient conformes aux APPSYNC_JS exigences. Cela permet de réutiliser le code existant dans votre application. Pour utiliser des bibliothèques définies par plusieurs fichiers, vous devez utiliser un outil de regroupement, tel que esbuild, pour combiner votre code dans un seul fichier qui peut ensuite être enregistré dans votre AWS AppSync résolveur ou votre fonction.

Lorsque vous regroupez votre code, gardez les points suivants à l'esprit :

Par exemple, pour regrouper le code de votre résolveur situé danssrc/appsync/getPost.resolver.js, vous pouvez utiliser la commande CLI esbuild suivante :

$ 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

Création de votre code et utilisation TypeScript

TypeScriptest un langage de programmation développé par Microsoft qui offre toutes ses JavaScript fonctionnalités ainsi que le système de TypeScript saisie. Vous pouvez l'utiliser TypeScript pour écrire du code sécurisé et détecter les erreurs et les bogues au moment de la compilation avant d'enregistrer votre code dans AWS AppSync. Le @aws-appsync/utils colis est entièrement dactylographié.

Le APPSYNC_JS runtime ne prend pas en charge TypeScript directement. Vous devez d'abord transpiler votre TypeScript code en JavaScript code pris en charge par le APPSYNC_JS moteur d'exécution avant de l'enregistrer dans AWS AppSync. Vous pouvez l'utiliser TypeScript pour écrire votre code dans votre environnement de développement intégré (IDE) local, mais notez que vous ne pouvez pas créer de TypeScript code dans la AWS AppSync console.

Pour commencer, assurez-vous que vous l'avez TypeScript installé dans votre projet. Configurez ensuite vos paramètres de TypeScript transcompilation pour qu'ils fonctionnent avec le APPSYNC_JS moteur d'exécution à l'aide de https://www.typescriptlang.org/tsconfig TSConfig. Voici un exemple de tsconfig.json fichier de base que vous pouvez utiliser :

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

Vous pouvez ensuite utiliser un outil de regroupement tel que esbuild pour compiler et regrouper votre code. Par exemple, pour un projet dont le AWS AppSync code se trouve à l'src/appsyncadresse, vous pouvez utiliser la commande suivante pour compiler et regrouper votre code :

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

Utilisation du codegen Amplify

Vous pouvez utiliser l'interface de ligne de commande Amplify pour générer les types de votre schéma. Dans le répertoire où se trouve votre schema.graphql fichier, exécutez la commande suivante et consultez les instructions pour configurer votre codegen :

$  npx @aws-amplify/cli codegen add

Pour régénérer votre codegen dans certaines circonstances (par exemple, lorsque votre schéma est mis à jour), exécutez la commande suivante :

$ npx @aws-amplify/cli codegen

Vous pouvez ensuite utiliser les types générés dans le code de votre résolveur. Par exemple, étant donné le schéma suivant :

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

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

type Query {
  listTodos: Todo
}

Vous pouvez utiliser les types générés dans l'exemple de AWS AppSync fonction suivant :

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
}

Utilisation de génériques dans TypeScript

Vous pouvez utiliser des génériques avec plusieurs des types fournis. Par exemple, l'extrait ci-dessous est un Todo type :

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

Vous pouvez écrire un résolveur pour un abonnement qui utilise. Todo Dans votre IDE, des définitions de type et des conseils de saisie semi-automatique vous guideront pour utiliser correctement l'utilitaire de toSubscriptionFilter transformation :

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
}

Répartissez vos lots

Vous pouvez automatiquement modifier vos bundles en important le esbuild-plugin-eslint plugin. Vous pouvez ensuite l'activer en fournissant une plugins valeur qui active les fonctionnalités d'eslint. Vous trouverez ci-dessous un extrait qui utilise l' JavaScript API esbuild dans un fichier appelé : 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 })],
})

Utilisation de cartes sources

Vous pouvez fournir une carte source en ligne (sourcemap) avec votre JavaScript code. Les cartes sources sont utiles lorsque vous regroupez JavaScript ou TypeScript codez et que vous souhaitez voir des références à vos fichiers sources d'entrée dans vos journaux et messages d' JavaScript erreur d'exécution.

Vous sourcemap devez apparaître à la fin de votre code. Il est défini par une seule ligne de commentaire qui suit le format suivant :

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

Voici un exemple :

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

Les cartes sources peuvent être créées avec esbuild. L'exemple ci-dessous vous montre comment utiliser l' JavaScriptAPI esbuild pour inclure une carte source en ligne lorsque le code est créé et groupé :

/* 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 particulier, les sourcesContent options sourcemap et spécifient qu'une carte source doit être ajoutée en ligne à la fin de chaque build mais ne doit pas inclure le contenu source. Par convention, nous vous recommandons de ne pas inclure de contenu source dans votresourcemap. Vous pouvez désactiver cela dans esbuild en réglant sources-content surfalse.

Pour illustrer le fonctionnement des cartes sources, consultez l'exemple suivant dans lequel un code de résolution fait référence à des fonctions d'assistance provenant d'une bibliothèque d'assistance. Le code contient des instructions de journal dans le code du résolveur et dans la bibliothèque d'assistance :

. /src/default.resolver.ts (votre résolveur)

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 fichier d'assistance)

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

Lorsque vous créez et regroupez le fichier de résolution, le code de votre résolveur inclut une carte source en ligne. Lorsque votre résolveur s'exécute, les entrées suivantes apparaissent dans les CloudWatch journaux :

En regardant les entrées du CloudWatch journal, vous remarquerez que les fonctionnalités des deux fichiers ont été regroupées et fonctionnent simultanément. Le nom de fichier d'origine de chaque fichier est également clairement reflété dans les journaux.