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

Hello, world!

Today we're going to talk about a cool bundle of 3 technologies on the frontend side:

1. Nuxt - a Vue-based web framework using web application architecture best practices
2. GraphQL - client-server data exchange technology
3. TypeScript - static typing to make fewer errors

I think you can figure out how to install Nuxt, Apollo GraphQL and TypeScript:

npm i @nuxtjs/apollo --save

Read the https://go.nuxtjs.dev/typescript to install TypeScript in your Nuxt project or enable the "Use TS" option when creating a Nuxt project in the CLI.

Let's discuss - how to make a deep integration of GraphQL and TypeScript types.

Let's set it up

First, let's create a file gql.d.ts in the root of your project:

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
}

Now TypeScript will know what the GraphQL files are. Next create the following folder structure for 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