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.

Sign up for GitHub

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

Configure http method used #3

Closed
wants to merge 1 commit into from
Closed

Configure http method used #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions app/controllers/graphiql/rails/editors_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@ def show
def graphql_endpoint_path
params[:graphql_path] || raise(%|You must include `graphql_path: "/my/endpoint"` when mounting GraphiQL::Rails::Engine|)
end

helper_method :graphql_endpoint_method
def graphql_endpoint_method
params[:graphql_method] || "POST"
end
end
end
end
19 changes: 14 additions & 5 deletions app/views/graphiql/rails/editors/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,22 @@

// Defines a GraphQL fetcher using the fetch API.
var graphQLEndpoint = "<%= graphql_endpoint_path %>";
var graphQLMethod = "<%= graphql_endpoint_method %>";
function graphQLFetcher(graphQLParams) {
return fetch(graphQLEndpoint, {
method: 'post',
var query = graphQLEndpoint;
var params = {
method: graphQLMethod,
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(graphQLParams),
credentials: 'include',
}).then(function (response) {
credentials: 'include'
};

if (graphQLMethod.toLowerCase() === 'get') {
query += "?query=" + graphQLParams.query;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, what is graphQLParams.query ?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's the GraphQL query (like { posts { id, title } }). For a GET request we can't send it in the request body like we do for POST, it needs to be the query param.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ohh right, graphQLParams is just a POJO with query and variables properties. Derp, sorry spaced on that. Should get requests also include query variables?

for example

query += "&variables=" + JSON.stringify(graphQLParams.variables)

Or, are they being sent to the server some other way?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, good point, we need to add the variables there as well. What about something like this:

var queryParams = Object.keys(graphQLParams).map(function(key) {
  return key + "=" + graphQLParams[key];
 });

query += "?" + queryParams.join("&");

So we always send all the params in graphQLParams, like we do for POST requests.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That seems good! Do you need JSON.stringify? Otherwise, objects might be represented as [Object object] (or whatever) 😬

Maybe also encodeURIComponent?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately JSON.stringify won't work as these values are already strings. It will try to "stringify" a string by escaping the quotes, which causes a parser error (stacktrace). I think we'd need a special handling to add objects in the url anyway.

encodeURIComponent doesn't seem to make a difference, maybe fetch.js is already taking care of that, but I can add it if you want.

} else {
params.body = JSON.stringify(graphQLParams);
}

return fetch(query, params).then(function (response) {
return response.json()
});
}
Expand Down
1 change: 1 addition & 0 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ end

- `at:` is the path where GraphiQL will be served. You can access GraphiQL by visiting that path in your app.
- `graphql_path:` is the path to the GraphQL endpoint. GraphiQL will send queries to this path.
- `graphql_method:` is the HTTP method used to send requests to the endpoint. If you don't define it, `POST` will be used.

### Configuration

Expand Down