Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Plugin: Gatsby-style implicit fragments #612

Closed
KyleAMathews opened this issue Oct 6, 2017 · 8 comments
Closed

Plugin: Gatsby-style implicit fragments #612

KyleAMathews opened this issue Oct 6, 2017 · 8 comments

Comments

@KyleAMathews
Copy link

@KyleAMathews KyleAMathews commented Oct 6, 2017

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
Copy link

@supermoos supermoos commented Aug 10, 2018

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
Copy link

@ScreamZ ScreamZ commented Jan 1, 2019

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

@kkor
Copy link

@kkor kkor commented Jan 17, 2019

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

@damassi
Copy link

@damassi damassi commented Feb 2, 2019

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
Copy link
Member

@acao acao commented Jun 22, 2019

@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
Copy link

@damassi damassi commented Jun 22, 2019

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

@benjie benjie changed the title Provide way to include fragments Plugin: implicit fragments (added to requests when referenced in operation) Dec 10, 2019
@benjie benjie changed the title Plugin: implicit fragments (added to requests when referenced in operation) Plugin: Gatsby-style implicit fragments Dec 10, 2019
@acao acao added this to GraphiQL Core in ! Feature Roundup Dec 17, 2019
@acao acao added this to the GraphiQL-1.0.0-beta milestone Mar 13, 2020
MarkBennett added a commit to MarkBennett/gatsby that referenced this issue Jun 29, 2020
This is a known issue, but it could confuse new Gatsby users (like myself).

[See the `gatsby-image` docs for details](https://www.gatsbyjs.org/packages/gatsby-image/#fragments), and [this GraphiQL issue for progress on a fix](graphql/graphiql#612).
AishaBlake pushed a commit to gatsbyjs/gatsby that referenced this issue Jul 9, 2020
…QL (#25387)

* Add a note about queries not working in GraphiQL

This is a known issue, but it could confuse new Gatsby users (like myself).

[See the `gatsby-image` docs for details](https://www.gatsbyjs.org/packages/gatsby-image/#fragments), and [this GraphiQL issue for progress on a fix](graphql/graphiql#612).

* chore: format

* Update docs/tutorial/gatsby-image-tutorial/index.md

Co-authored-by: Yogi <me@yogi.codes>

* Fix relative link

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>
Co-authored-by: Ward Peeters <ward@coding-tech.com>
Co-authored-by: Yogi <me@yogi.codes>
Co-authored-by: Aisha Blake <aisha@gatsbyjs.com>
gatsbybot added a commit to gatsbyjs/gatsby-i18n-source that referenced this issue Jul 9, 2020
…gatsby-image` fragments not working in GraphiQL (#25387)

* Add a note about queries not working in GraphiQL

This is a known issue, but it could confuse new Gatsby users (like myself).

[See the `gatsby-image` docs for details](https://www.gatsbyjs.org/packages/gatsby-image/#fragments), and [this GraphiQL issue for progress on a fix](graphql/graphiql#612).

* chore: format

* Update docs/tutorial/gatsby-image-tutorial/index.md

Co-authored-by: Yogi <me@yogi.codes>

* Fix relative link

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>
Co-authored-by: Ward Peeters <ward@coding-tech.com>
Co-authored-by: Yogi <me@yogi.codes>
Co-authored-by: Aisha Blake <aisha@gatsbyjs.com>
gatsbybot added a commit to gatsbyjs/gatsby-starter-default that referenced this issue Jul 9, 2020
…QL (#25387)

* Add a note about queries not working in GraphiQL

This is a known issue, but it could confuse new Gatsby users (like myself).

[See the `gatsby-image` docs for details](https://www.gatsbyjs.org/packages/gatsby-image/#fragments), and [this GraphiQL issue for progress on a fix](graphql/graphiql#612).

* chore: format

* Update docs/tutorial/gatsby-image-tutorial/index.md

Co-authored-by: Yogi <me@yogi.codes>

* Fix relative link

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>
Co-authored-by: Ward Peeters <ward@coding-tech.com>
Co-authored-by: Yogi <me@yogi.codes>
Co-authored-by: Aisha Blake <aisha@gatsbyjs.com>
gatsbybot added a commit to gatsbyjs/gatsby-starter-minimal that referenced this issue Jul 9, 2020
…QL (#25387)

* Add a note about queries not working in GraphiQL

This is a known issue, but it could confuse new Gatsby users (like myself).

[See the `gatsby-image` docs for details](https://www.gatsbyjs.org/packages/gatsby-image/#fragments), and [this GraphiQL issue for progress on a fix](graphql/graphiql#612).

* chore: format

* Update docs/tutorial/gatsby-image-tutorial/index.md

Co-authored-by: Yogi <me@yogi.codes>

* Fix relative link

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>
Co-authored-by: Ward Peeters <ward@coding-tech.com>
Co-authored-by: Yogi <me@yogi.codes>
Co-authored-by: Aisha Blake <aisha@gatsbyjs.com>
gatsbybot added a commit to gatsbyjs/gatsby-starter-notes-theme that referenced this issue Jul 9, 2020
…QL (#25387)

* Add a note about queries not working in GraphiQL

This is a known issue, but it could confuse new Gatsby users (like myself).

[See the `gatsby-image` docs for details](https://www.gatsbyjs.org/packages/gatsby-image/#fragments), and [this GraphiQL issue for progress on a fix](graphql/graphiql#612).

* chore: format

* Update docs/tutorial/gatsby-image-tutorial/index.md

Co-authored-by: Yogi <me@yogi.codes>

* Fix relative link

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>
Co-authored-by: Ward Peeters <ward@coding-tech.com>
Co-authored-by: Yogi <me@yogi.codes>
Co-authored-by: Aisha Blake <aisha@gatsbyjs.com>
gatsbybot added a commit to gatsbyjs/gatsby-starter-theme that referenced this issue Jul 9, 2020
…QL (#25387)

* Add a note about queries not working in GraphiQL

This is a known issue, but it could confuse new Gatsby users (like myself).

[See the `gatsby-image` docs for details](https://www.gatsbyjs.org/packages/gatsby-image/#fragments), and [this GraphiQL issue for progress on a fix](graphql/graphiql#612).

* chore: format

* Update docs/tutorial/gatsby-image-tutorial/index.md

Co-authored-by: Yogi <me@yogi.codes>

* Fix relative link

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>
Co-authored-by: Ward Peeters <ward@coding-tech.com>
Co-authored-by: Yogi <me@yogi.codes>
Co-authored-by: Aisha Blake <aisha@gatsbyjs.com>
@acao
Copy link
Member

@acao acao commented Sep 21, 2020

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
Copy link
Member

@acao acao commented Oct 6, 2020

here's what was introduced specifically:

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
acao added a commit that referenced this issue Jan 4, 2021
allows external, implied fragments in autocompletion, validation, and operation execution
@acao acao mentioned this issue Jan 5, 2021
4 of 4 tasks complete
@acao acao closed this in #1750 Jan 7, 2021
acao added a commit that referenced this issue Jan 7, 2021
allows external, implied fragments in autocompletion, validation, and operation execution. resolves #612 

- adds this capability to `monaco-graphql`, `codemirror-graphql`, and `graphiql`. it was already present in `graphql-language-service-interface`.
- provide an array of fragment definitions or a string containing fragment definitions
- only fragments you use are added in operation exec, thus in fetcher params as well
- still only shows valid autocomplete entries for fragment spread
- also exposes a documentAST of the current operation in `onEditQuery` and in the `fetcher`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
! Feature Roundup
GraphiQL Core
Linked pull requests

Successfully merging a pull request may close this issue.

6 participants