Plugin: Gatsby-style implicit fragments

[KyleAMathews]

I'm adding support to Gatsby for components/plugins to ship with fragments that can be used out-of-the-box when building sites.

It'd be great if there was a way to add these to GraphiQL. Right now there's no way to add a fragment other than changing the default text and that still wouldn't work as then graphiql would fail as there'd be unused fragments.

If it's possible to add fragments to the schema and I just missed that, would love a pointer there!

[supermoos]

Yes, this would be really great to get, as not having the fragment schemas in the outputted schema file at: http://localhost:8000/___graphql? breaks other things like compiling GraphQL types for things like typescript using apollo-codegen - as they validate the schema, and it's invalid without these fragments :-(

[ScreamZ]

@KyleAMathews Apollo server has an updated graphiQL now, I think its the one from graphcool and prisma. Maybe it solve the issue ?

[kkor]

@ScreamZ I just tried generating types with the most recent apollo-cli ([email protected]), but it still throws "Unknown fragment "GatsbyImageSharpFixed"" :(

[damassi]

I just ran into the same thing while building an emit-types plugin around relay-compiler-language-typescript.

If I omit the plugin fragment things work great:

example % yarn relay
yarn run v1.13.0
$ relay-compiler --src . --schema schema.graphql --language typescript --artifactDirectory ./src/__generated__
HINT: pass --watch to keep watching for changes.

Writing ts
Created:
 - seoQuery.graphql.ts
 - BioQuery.graphql.ts

However, when including the fragment the compiler throws an error:

ERROR:
GraphQLCompilerContext: Unknown document `GatsbyImageSharpFixed`.

[acao]

@kkor sounds like a different but similar issue
@KyleAMathews is there any way for these plugin-provided fragments to appear in a schema introspection? or is there some other kind of magic around this? I've heard discussion of this feature in gatsby and was hoping the new version 1.0 graphiql plugin API would be able to service this need.

[damassi]

I created a plugin which one can use to easily demo the issue: https://github.com/damassi/gatsby-plugin-emit-graphql-types.

[acao]

good news! so we have this fully working in the LSP and on the server side, for both validation and completion. you can use vscode-graphql as an example implementation of the lsp server. a vim coc plugin for relay will soon offer this as well

works great with gatsby’s plugin fragments, for example. now i can introduce this to codemirror graphql and monaco graphql, and also to graphiql. also works for definition lookips.

the gls interface autocomplete method now accepts an array of FragmentDefinitionNodes

i’m thinking that GraphiQL could accept a prop called fragments that would just be a string of all the fragments. if this prop gets updated, the lsp interface would take up the new fragments for validation, completion. eventually with monaco-graphql in 2.x we will have peek definitions like we have in vscode-graphql now!

[acao]

here's what was introduced specifically:

graphiql/packages/graphql-language-service-interface/src/getAutocompleteSuggestions.ts

Line 73 in 39f5e45

fragmentDefs?: FragmentDefinitionNode[],

this allows autocompletion support for externally provided fragments!

we use it to allow autocompletion in the IDE extensions

here's what needs to happen next to make this work in GraphiQL 1:

• codemirror-graphql interface update for loading both schema and fragments
• codemirror-graphql update to hint to provide new fragments argument in interface
• codemirror-graphql update to lint to validate implied fragments
• graphiql update to add prop for providing fragments as either a pre-defined string or an array of AST Nodes
  • support autocompletion of fragments
  • support linting of fragments
  • support execution with fragments

here's whats needed for monaco editor:

• update monaco interface to accept predefined fragments
• provide fragments to completion in interface
• provide fragments to lint in interface