CODEWITHSUNDEEP
visual-studio-codegraphql
Danilo Cunha
Danilo Cunha

Reputation: 1288

There is a way to syntax highlight GraphQl TypeDef inside ` ` (grave accent) in vscode?

I Want to syntax highlight the code inside typeDef. It is possible?

There is a extension for this? Or I have to code the typeDef other way?

export const typeDef = `
 type User {
  _id: ID!
  email: String!
  password: String
  createdEvents: [Event!]
 }

 type AuthData {
  userId: ID!
  token: String!
  tokenExpiration: Int!
 }

 input UserInput {
  email: String!
  password: String!
 }
`;

Upvotes: 7

Views: 3864

Answers (2)

deadcoder0904
deadcoder0904

Reputation: 8683

Use String.raw to trick VSCode into Syntax Highlighting GraphQL. It works for other languages as well.

export const gql = String.raw

export const typeDef = gql`
  type User {
    _id: ID!
    email: String!
    password: String
    createdEvents: [Event!]
  }

  type AuthData {
    userId: ID!
    token: String!
    tokenExpiration: Int!
  }

  input UserInput {
    email: String!
    password: String!
  }
`

Upvotes: 18

Daniel Rearden
Daniel Rearden

Reputation: 84687

Assuming you're using the right extension, you need to use the gql tag from graphql-tag.

const gql = require('graphql-tag')

const typeDefs = gql`
  type User { ... }
`

The tag parses the provided string and returns a DocumentNode object, which is what should be passed to makeExecutableSchema or the ApolloServer constructor. On the client side, the queries used by ApolloClient are also expected to be DocumentNode objects and should be wrapped the same way.

The extension is able to detect usage of the tag and apply syntax highlighting accordingly.

Upvotes: 3

Related Questions