有一种方法可以在 vscode 中的` `（重音符号）内语法高亮 GraphQl TypeDef 吗？

Question

我想对 typeDef 中的代码进行语法高亮显示。有可能的？

有一个扩展吗？或者我必须以其他方式编码 typeDef ？

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!
 }
`;

Answer 1

使用String.raw将 VSCode 诱骗到语法突出显示 GraphQL 中。它也适用于其他语言。

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!
  }
`

Answer 2

假设您使用正确的扩展名，则需要使用gql来自 的标签graphql-tag。

const gql = require('graphql-tag')

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

该标记解析提供的字符串并返回一个DocumentNode对象，该对象应该传递给构造makeExecutableSchema函数ApolloServer。在客户端，ApolloClient 使用的查询也应该是DocumentNode对象，并且应该以相同的方式包装。

该扩展能够检测标签的使用并相应地应用语法突出显示。