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:
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.
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