VSCode GRAPHQL integration - example

Component.tsx

import * as React from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import { GetSystemLogsQuery } from '../generated/schema';

const GET_SYSTEM_LOGS = gql`
  query GetSystemLogs {
    system {
      logs  // INTELISENSE NOT WORKING HERE :(
    }
  }
`;

class GetGetSystemLogs extends Query<GetSystemLogsQuery> {}

const SystemLogsScreen = () => (
  <div>
    <h1>System Logs</h1>
    <GetGetSystemLogs query={GET_SYSTEM_LOGS} fetchPolicy="cache-first">
      {({ loading, error, data }) =>
        data && data.system ? (
          <pre>{data.system.logs}</pre>
        ) : (
          <div>Loading...</div>
        )
      }
    </GetGetSystemLogs>
  </div>
);

export default SystemLogsScreen;

Dependencies

"ts-graphql-plugin": "^1.1.2",
"typescript": "^2.8.3"

tsconfig.json

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom", "esnext.asynciterable"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": false,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "plugins": [
    {
      "name": "ts-graphql-plugin"
    }
  ]
}