#783 graphql playground integration

[dani97]

Graphql Playground integration with magento 2. Accessible in default mode and developer mode.

Description (*)

1. Graphql Playground integration with magento 2.
2. Created a route with id graphiql (please suggest a better url, I couldn't think of better one)
3. Accessible in default mode and developer mode as {BASE_URL/graphql} in modern browsers. In production mode, redirection to 404 page.
4. Removed all default magento styles from the page.
5. Implemented as independent module like swagger so can be removed or disabled in production.

Fixed Issues (if relevant)

1. magento/graphql-ce#783: Integrate GraphQL Playground

Manual testing scenarios (*)

1. In developer or default mode access {BASE_URL}/graphiql
2. In Production mode same url will be redirected to 404 page.

Questions or comments

Contribution checklist (*)

• [X] Pull request has a meaningful description of its purpose
• [X] All commits are accompanied by meaningful commit messages
• [x] All new or changed code is covered with unit/integration tests (if applicable)
• [x] All automated tests passed successfully (all builds are green)

[dani97]

No idea how to fix the failing composer.json test.

[TomashKhamlai]

Hi, @dani97. May I perform manual functional testing now or it is still work in progress?

[dani97]

@TomashKhamlai I have been fixing static tests failure. They are code style issues. I can hold on when you are testing. Thank you.

[dani97]

@TomashKhamlai only composer static tests are failing with latest build, you can continue testing.

[dani97]

@TomashKhamlai please update when you are done with manual testing, I will then update my PR for failing static tests. :)

[TomashKhamlai]

Please, advise something.

I checked out your PR by id and switched to production mode in order to verify that schema is loading. Then I run

rm composer.lock && composer install php bin/magento setup:upgrade rm -rf var/ generated/ pub/static/* php bin/magento dep:mo:set developer php bin/magento s:d:c

[dani97]

@TomashKhamlai can you check a js file and css loading from cdn.jsdelivr.net.

[TomashKhamlai]

[TomashKhamlai]

Please try doing this:

rm -rf var/* pub/static/*
php bin/magento setup:sta:dep -f

and then check again.

[dani97]

@TomashKhamlai all working great now. can you check again. I will hold fixing the failing bundle tests failure until you are done. Thanks

[TomashKhamlai]

Please fix this

Uncaught TypeError: require.config is not a function
    at graphiql:66
(anonymous) @ graphiql:66

[TomashKhamlai]

In general, it works as a standalone application even when I brake the schema. Keep in mind that when you take a task without the label ready for dev it can take a lot of time for maintainers to get to your PR. Please, be patient.

[dani97]

@TomashKhamlai Thanks I will wait.

[dani97]

Please fix this

Uncaught TypeError: require.config is not a function
    at graphiql:66
(anonymous) @ graphiql:66

I followed the same way where in swagger removed unwanted js modules for the models. The same error is thrown there too on removing requirejs.

[TomashKhamlai]

I suggest checking what happens if you keep require-config.js instead of removing). I think that you will have a more effective conversation with code reviewers. Good luck and thank you for your contribution!

[lenaorobei]

@paliarush we need you review here as well.

[lenaorobei]

@dani97 could you please pull latest 2.3-develop and address review comments?

[dani97]

@dani97 could you please pull latest 2.3-develop and address review comments?

@lenaorobei I have fixed most of the comments.I could not find the unminified version from graphql playground, have to dig more to find how they transpiled and minified the react components, so I will add map file.

[TomashKhamlai]

@dani97, one little note. When built-in GraphQL Playground opens, I see the store header present in the location bar of the built-in client. I ask to change it. The expected behavior is that the header is set in the "HEADERS" section at the bottom of the page and nowhere else. More about accepting GraphQL headers in Magento can be read in the Documentation: Send Request #request-headers

[dani97]

@dani97, one little note. When built-in GraphQL Playground opens, I see the store header present in the location bar of the built-in client. I ask to change it. The expected behavior is that the header is set in the "HEADERS" section at the bottom of the page and nowhere else. More about accepting GraphQL headers in Magento can be read in the Documentation: Send Request #request-headers

Thanks for pointing out. Fixed it @TomashKhamlai

[chalov-anton]

Each time I try to Execute (Ctrl+Enter)an empty query, a "Syntax Error GraphQL request (2:1) Unexpected \n\n1: # Write your query or mutation here\n2: \n ^\n" appears in Wed Browser Console

[dani97]

@chalov-anton It is not a issue I believe, also graphql playground has this same behavior out of the box.

[chalov-anton]

Considering the PR Description https://github.com/magento/graphql-ce/pull/992#issue-325814054 the Graphql Playground integration should not be accessible from Production mode But now it is (The browser cache has been cleaned)

[lenaorobei]

As per conversation with @dani97 we agreed to open a new PR to https://github.com/magento/magento2 repo.

@dani97 thanks for understanding and collaboration!

[ghost]

Hi @dani97, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.