Skip to content
This repository has been archived by the owner on Mar 20, 2023. It is now read-only.

Can't submit graphiql options #558

Open
SephReed opened this issue Aug 27, 2019 · 5 comments
Open

Can't submit graphiql options #558

SephReed opened this issue Aug 27, 2019 · 5 comments

Comments

@SephReed
Copy link

These props (https://github.com/graphql/graphiql/tree/master/packages/graphiql#usage) should be submittable to the qraphiql instance. I can't figure out a way to send them.

@IvanGoncharov
Copy link
Member

@SephReed At the moment we support only defaultQuery:

export type GraphiQLOptions = {|
/**
* An optional GraphQL string to use when no query is provided and no stored
* query exists from a previous session. If undefined is provided, GraphiQL
* will use its own default query.
*/
defaultQuery?: ?string,
|};

What other properties do you need?

@SephReed
Copy link
Author

fetcher would be really, really helpful. But, just in general, a passthrough of all the props would be ideal.

@SephReed
Copy link
Author

I could also really use a way to inject custom ui alongside graphiql. I'm trying to get it to have a jwt token field so I can test it with authorized endpoints.

@IvanGoncharov
Copy link
Member

@SephReed Problem is that we send HTML with GraphiQL to the browser so your fetcher function should be fully embedded into HTML, see:
https://github.com/graphql/express-graphql/blob/master/src/renderGraphiQL.js#L47

In theory, we can have fetcher but it should be a string with JS code inside and you can't use any libraries expect fetch and browser API.
Will this work for you?

@SephReed
Copy link
Author

hmmm... It would work for me, but I don't think that's the right solution. Honestly, I think it would work better to allow users to hook into the graphiql response and inject the strings themselves. This would solve both of my problems at once, and allow for any other needed customizations. It would be janky, for sure, but sometimes that's the best way.

So, in all:

export type GraphiQLOptions = {| 
   /** 
    * An optional GraphQL string to use when no query is provided and no stored 
    * query exists from a previous session.  If undefined is provided, GraphiQL 
    * will use its own default query. 
    */ 
   defaultQuery?: ?string, 
   parseResponse?: (rawResp: string) => string
 |};


// example usage
const iqlOption: GraphiQLOptions = {
  parseResponse: (rawResp) => {
    return rawResp.replace("Documentation Explorer", "Docs") + "<script src='injectThing.js'></script>";
  }
}

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants