Code Monkey home page Code Monkey logo

codemirror-graphql's Introduction

codemirror-graphql's People

Contributors

acao avatar ags- avatar alanlavintman avatar asiandrummer avatar benjie avatar danez avatar fson avatar greenkeeper[bot] avatar greenkeeperio-bot avatar jskorepa avatar langpavel avatar leebyron avatar romanhotsiy avatar skevy avatar wincent avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

codemirror-graphql's Issues

How to bring graphql schema from server to client?

Hello everyone,
I am using graphql java implementation and codemirror in client side to test graphql apis. Now i need to show type suggestion in client side. After many search i ended up here https://github.com/graphql/codemirror-graphql, how to pass graphql schema to codemirror. How to bring schema from java server side to client side.
I heard we can using query interpolation to build schema in client side, if this possible plz explain how to do this.

Getting a TypeError when rendering GraphiQL

I also submitted an issue to the GraphiQL repo, but since it's raised from within graphql-language-interface, I thought I'd repost it here.

I'm getting the following error:

Uncaught TypeError: Cannot read property '0' of undefined
    at getDiagnostics (getDiagnostics.js?6960:46)
    at eval (lint.js?eb0c:38)
    at startLinting (lint.js?af2c:147)
    at Object.eval [as lint] (lint.js?af2c:241)
    at new CodeMirror$1 (codemirror.js?f14e:7645)
    at CodeMirror$1 (codemirror.js?f14e:7590)
    at QueryEditor.componentDidMount (QueryEditor.js?39d7:115)
    at eval (ReactCompositeComponent.js?063f:264)
    at measureLifeCyclePerf (ReactCompositeComponent.js?063f:75)
    at eval (ReactCompositeComponent.js?063f:263)

In GetDiagnostics, the error happens in the last line of the following code:

try {
    ast = (0, _graphql.parse)(queryText);
  } catch (error) {
    var range = getRange(error.locations[0], queryText);

I'm trying to put a breakpoint ether at the start of the catch block, so I can se the original error, but Chrome's dev tools won't let me.

Putting a breakpoint on the ast = ... line, all local variables are undefined, except queryText, which is equal to:

 "# Welcome to GraphiQL
#
# GraphiQL is an in-browser tool for writing, validating, and
# testing GraphQL queries.
#
# Type queries into this side of the screen, and you will see intelligent
# typeaheads aware of the current GraphQL type schema and live syntax and
# validation errors highlighted within the text.
#
# GraphQL queries typically start with a "{" character. Lines that starts
# with a # are ignored.
#
# An example GraphQL query might look like:
#
#     {
#       field(arg: "value") {
#         subField
#       }
#     }
#
# Keyboard shortcuts:
#
#       Run Query:  Ctrl-Enter (or press the play button above)
#
#   Auto Complete:  Ctrl-Space (or just start typing)
#

"

make codemirror-graphql to support graphql 0.8.0-b as a peer dependency

If i want to use the latest version of all the graphql stack, this is how its going to look like:

"express-graphiql": "1.0.0",
"express-graphql": "0.6.1",
"graphiql": "0.8.1",
"graphql": "0.8.0-beta3",
"graphql-relay": "0.4.4",

While doing either a yarn or npm install i get a warning because codemirror-graphql doesnt find a suitable version (only has 0.6.0, 0.7.0 and 0.8.0), but when i want to move graphql forward to 0.8.3, i get a warning from the rest of the libraries that currently support (only has 0.6.0, 0.7.0 and 0.8.0-b).

please enable graphql v13 as peer dependency

I am getting an increasing number of problems due to different versions of graphql in the codebase.

And most of all: due to an issue in graphql versions before v13 that creates errors when multiple instances of graphql (even the same version) were created, see: https://github.com/graphql/graphql-js/releases/tag/v0.13.0 "Only trigger "one instance of graphql" error in DEV environments, removing false errors from minified bundles".

I am using a resolutions key in package.json to circumvent problems:

"resolutions": {
    "graphql": "0.13.2"
}

npm ls graphql lists in my case:

alexa@DESKTOP-6C4V66Q C:\Users\alexa\ae2
> npm ls graphql
[email protected] C:\Users\alexa\ae2
+-- [email protected]
| `-- [email protected]
|   `-- [email protected]
|     `-- [email protected]
|       +-- UNMET DEPENDENCY graphql@^0.12.3
|       `-- [email protected]
|         `-- UNMET DEPENDENCY graphql@^0.12.3
`-- [email protected]
  `-- UNMET DEPENDENCY graphql@>=0.6 <0.13

npm ERR! missing: graphql@^0.12.3, required by [email protected]
npm ERR! missing: graphql@^0.12.3, required by [email protected]
npm ERR! missing: graphql@>=0.6 <0.13, required by [email protected]

Someone else has asked postgraphile to update to graphql v13 but that seems blocked because of codemirror-graphql: graphile/crystal#720

Problem with IDEOGRAPHIC SPACE (\u3000)

I have problems with GraphiQL if a query includes IDEOGRAPHIC SPACE (\u3000).

I'm not sure it is a problem in codeirror-graphql or CodeMirror, but here is a reproducable test case which never completes (maybe with infinite loop?):

diff --git a/src/__tests__/mode-test.js b/src/__tests__/mode-test.js
index 77cc2b4..194b6d0 100644
--- a/src/__tests__/mode-test.js
+++ b/src/__tests__/mode-test.js
@@ -127,4 +127,19 @@ describe('graphql-mode', () => {
       },
     );
   });
+
+  it('deals with IDEOGRAPHIC SPACE', () => {
+    const queryStr = '\u3000'
+    const tokens = [];
+    const styles = [];
+
+    CodeMirror.runMode(queryStr, 'graphql', (token, style) => {
+      if (style && style !== 'ws') {
+        tokens.push(token);
+        styles.push(style);
+      }
+    });
+
+    expect(styles).to.deep.equal([]);
+  });
 });

Code in 0.6.3 version on the npm is quite different with the code on the github

In npm version:

_codemirror2.default.registerHelper('lint', 'graphql', function (text, options, editor) {
  var schema = options.schema;
  if (!schema) {
    return [];
  }

  try {
    var ast = (0, _graphql.parse)(text);
    var validationErrorAnnotations = mapCat((0, _graphql.validate)(schema, ast), function (error) {
      return annotations(editor, error, 'error', 'validation');
    });
    // Note: findDeprecatedUsages was added in [email protected], but we want to
    // support older versions of graphql-js.
    var deprecationWarningAnnotations = !_graphql.findDeprecatedUsages ? [] : mapCat((0, _graphql.findDeprecatedUsages)(schema, ast), function (error) {
      return annotations(editor, error, 'warning', 'deprecation');
    });
    return validationErrorAnnotations.concat(deprecationWarningAnnotations);
  } catch (error) {
    var location = error.locations[0];
    var pos = _codemirror2.default.Pos(location.line - 1, location.column);
    var token = editor.getTokenAt(pos);
    return [{
      message: error.message,
      severity: 'error',
      type: 'syntax',
      from: _codemirror2.default.Pos(location.line - 1, token.start),
      to: _codemirror2.default.Pos(location.line - 1, token.end)
    }];
  }
});

function annotations(editor, error, severity, type) {
  return error.nodes.map(function (node) {
    var highlightNode = node.kind !== 'Variable' && node.name ? node.name : node.variable ? node.variable : node;
    return {
      message: error.message,
      severity: severity,
      type: type,
      from: editor.posFromIndex(highlightNode.loc.start),
      to: editor.posFromIndex(highlightNode.loc.end)
    };
  });
}

// General utility for map-cating (aka flat-mapping).
function mapCat(array, mapper) {
  return Array.prototype.concat.apply([], array.map(mapper));
}

On the github lastest version(same 0.6.3):

CodeMirror.registerHelper('lint', 'graphql', (text, options) => {
  const schema = options.schema;
  const rawResults = getDiagnostics(text, schema);

  const results = rawResults.map(error => ({
    message: error.message,
    severity: SEVERITY[error.severity],
    type: error.source,
    from: error.range.start,
    to: error.range.end,
  }));

  return results;
});

I think may be it is not the latest version on the npm verion, but it's 0.6.3 same with the version on github.But the code is quite different, what happend?

Add fragment suggestion

Hi,
Thank for this awesome project and graphQL in general, what a revolution.
I use intelliJ Idea with JS GraphQL IntelliJ Plugin, I noticed it didn't suggest fragment when I type "...", this would be a nice feature if it's not too much to ask.
Thank you again.

The autocomplete doesn't show any description

Hello,

So I have a project using codemirror and this package for working with graphql queries. Everything seems to work fine, but looking at the demo GIF on this repo, and in other projects, there is a description of the items in the autocomplete at the base of the autocomplete. I've not been able to get mine to show that description, and I am stuck at this point. Please any ideas on what is missing? https://github.com/imolorhe/altair/blob/staging/src/app/query-editor/query-editor.component.ts#L162

automatically fills in leaf nodes

https://github.com/graphql/graphiql#usage-examples

      // GraphiQL automatically fills in leaf nodes when the query
      // does not provide them. Change this if your GraphQL Definitions
      // should behave differently than what's defined here:
      // (https://github.com/graphql/graphiql/blob/master/src/utility/fillLeafs.js#L75)
      getDefaultFieldNames: null

when no query and press cmd + enter, automatically fills in leaf nodes like GraphiQL

Support for schema shorthand notation

Hey.

Thanks for this project. It's been hugely helpful in bringing GraphQL to the IntelliJ family.

Are there any plans to add support for the schema shorthand notation?

If not, and you're open to it, I'll see if I can find the time to do a PR. I'm assuming you'll prefer a separate mode like what was just added for variables?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.