Photo by https://unsplash.com/@casparrubin

Привет, мир!

Сегодня мы поговорим о крутой связке 3-х технологий на стороне фронтенда:

1. Nuxt – веб-фреймворк на основе Vue с использованием лучших практик архитектуры веб-приложений
2. GraphQL – технология обмена данными между клиентом и сервером
3. TypeScript – статическая типизация, чтобы делать меньше ошибок

Я думаю, что вы сможете разобраться с тем, как установить Nuxt, Apollo GraphQL и TypeScript:

npm i @nuxtjs/apollo --save

Читайте https://go.nuxtjs.dev/typescript, чтобы установить TypeScript в свой Nuxt-проект, либо включите опцию "Use TS" при создании проекта в CLI.

Давайте обсудим – как сделать глубокую интеграцию GraphQL и типов TypeScript.

Настраиваем

Для начала создадим файл gql.d.ts в корне вашего проекта:

declare module '*.gql' {
  import { DocumentNode } from 'graphql'
  const content: DocumentNode
  export default content
}

declare module '*.graphql' {
  import { DocumentNode } from 'graphql'
  const content: DocumentNode
  export default content
}

Теперь TypeScript будет знать о том, что из себя представляют файлы GraphQL. Далее – создаём следующую структуру папок для Apollo:

**apollo**
- **mutations**      // folder for .gql mutations files
- **queries**        // folder for .gql queries files
- *.graphqlconfig* // our GQL config
- *schema.gql*     // auto-generated schema
...
**components**
**plugins**
package.json