Question: Syntax highlighting for vscode

[FrederickEngelhardt]

Is anyone doing syntax highlight for the raw string with vscode?

So far I've got it working by doing a hacky apolloserver gql subtitution

example

const gql = (s) => `${s}`

const schema = gql`
 type YourTypes {}
`

This will highlight the standard queries but obviously omits the extensions. Anyone get further with this?

[nicolasdao]

I usually store my schema in its own schema.graphql file and the resolver in its own resolver.js. Vscode should support code highlighting for .graphql file.

My code is usually structured like this:

- src/
   |__ graphql/
          |__ product/
          |       |__ schema.graphql
          |       |__ resolver.js
          |
          |__ variant/
                  |__ schema.graphql
                  |__ resolver.js

- index.js
- package.json

I've added an example of schema.graphql and resolver.js in the annex of this message.

Where you can see that I breakdown my domain model in their own schema and resolver.

I use https://www.npmjs.com/package/schemaglue to assemble the schema and resolver in the root index.js as follow:

const { transpileSchema } = require('graphql-s2s').graphqls2s
const { graphqlHandler } = require('graphql-serverless')
const express = require('express')
const app = express()
const { makeExecutableSchema } = require('graphql-tools')
const glue = require('schemaglue')
 
const { schema, resolver } = glue('src/graphql')
 
const executableSchema = makeExecutableSchema({
    typeDefs: [transpileSchema(schema)],
    resolvers: resolver
})
 
const graphqlOptions = {
  schema: executableSchema,
  graphiql: { // If you do not want to host any GraphiQl web interface, leave this property undefined.
    endpoint: '/graphiql' 
  }
}
 
// Host a GraphQl API on 2 endpoints: '/' and '/graphiql'. '/graphiql' is used to host the GraphiQL web interface.
// If you're not interested in the GraphiQl web interface, leave the above 'graphqlOptions.graphiql' undefined and 
// replace the path following ['/', '/graphiql'] with '/'.
app.all(['/', '/graphiql'], graphqlHandler(graphqlOptions))
 
// Starting the server 
app.listen(4000, () => console.log('Server start. Go to http://localhost:4000/graphiql'))

Annex

# src/graphql/variant/schema.graphql
 
type Variant {
  id: ID!
  name: String!
  shortDescription: String
}
 
type Query {
  variants(id: Int): [Variant]
}

// src/graphql/variant/resolver.js
 
const { graphqlError } = require('graphql-serverless')
 
const variantMocks = [{ id: 1, name: 'Variant A', shortDescription: 'First variant.' }, { id: 2, name: 'Variant B', shortDescription: 'Second variant.' }]
 
exports.resolver = {
  Query: {
    variants(root, { id }, context) {
      const results = id ? variantMocks.filter(p => p.id == id) : variantMocks
      if (results.length > 0)
        return results
      else
        throw graphqlError(404, `Variant with id ${id} does not exist.`)
    }
  }
}