Merge pull request #81 from nanasess/use-graphiql

GraphiQL を組み込み

ApiNav.php

@@ -22,7 +22,7 @@ class ApiNav implements EccubeNav
      */
     public static function getNav()
     {
-        return [
+        $menu = [
             'setting' => [
                 'children' => [
                     'api' => [
@@ -41,5 +41,13 @@ public static function getNav()
                 ],
             ],
         ];
+        if ('dev' === env('APP_ENV')) {
+            $menu['setting']['children']['api']['children']['graphiql'] = [
+                'name' => 'api.admin.graphiql.name',
+                'url' => 'admin_api_graphiql',
+            ];
+        }
+
+        return $menu;
     }
 }

Controller/Admin/GraphiQLController.php

@@ -0,0 +1,94 @@
+<?php
+
+/*
+ * This file is part of EC-CUBE
+ *
+ * Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
+ *
+ * http://www.ec-cube.co.jp/
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Plugin\Api\Controller\Admin;
+
+use Eccube\Controller\AbstractController;
+use GraphQL\Error\DebugFlag;
+use GraphQL\GraphQL;
+use Plugin\Api\GraphQL\Schema;
+use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
+use Symfony\Component\HttpKernel\KernelInterface;
+use Symfony\Component\Routing\Annotation\Route;
+use RuntimeException;
+
+class GraphiQLController extends AbstractController
+{
+    /**
+     * @var KernelInterface
+     */
+    private $kernel;
+
+    /**
+     * @var Schema
+     */
+    private $schema;
+
+    public function __construct(
+        KernelInterface $kernel,
+        Schema $schema
+    ) {
+        $this->kernel = $kernel;
+        $this->schema = $schema;
+    }
+
+    /**
+     * @Route("/%eccube_admin_route%/graphiql", name="admin_api_graphiql", methods={"GET"})
+     * @Template("@Api/admin/OAuth/graphiql.twig")
+     *
+     * @return array
+     */
+    public function graphiql()
+    {
+        if ('dev' !== env('APP_ENV')) {
+            throw new AccessDeniedHttpException();
+        }
+        return [];
+    }
+
+    /**
+     * @Route("/%eccube_admin_route%/graphiql/api", name="admin_api_graphiql_api", methods={"POST"})
+     */
+    public function index(Request $request)
+    {
+        if ('dev' !== env('APP_ENV')) {
+            throw new AccessDeniedHttpException();
+        }
+        $this->isTokenValid();
+
+        switch ($request->getMethod()) {
+            case 'GET':
+                $query = $request->get('query');
+                $variableValues = json_decode($request->get('variables'), true);
+                break;
+            case 'POST':
+                $body = json_decode($request->getContent(), true);
+                $query = $body['query'];
+                $variableValues = isset($body['variables']) ? $body['variables'] : null;
+                break;
+            default:
+                throw new RuntimeException();
+        }
+
+        $result = GraphQL::executeQuery($this->schema, $query, null, null, $variableValues);
+
+        if ($this->kernel->isDebug()) {
+            $debug = DebugFlag::INCLUDE_DEBUG_MESSAGE | DebugFlag::INCLUDE_TRACE;
+            $result = $result->toArray($debug);
+        }
+
+        return $this->json($result);
+    }
+}

Resource/locale/messages.en.yaml

@@ -40,6 +40,8 @@ api:
       search_no_result_message: No WebHooks.
       delete__confirm_title: Delete a WebHook
       delete__confirm_message: Are you sure to delete this WebHook?
+    graphiql:
+      name: GraphiQL
 
   #------------------------------------------------------------------------------------
   # API

Resource/locale/messages.ja.yaml

@@ -40,7 +40,8 @@ api:
       search_no_result_message: WebHookが登録されていません
       delete__confirm_title: WebHookを削除します
       delete__confirm_message: WebHookを削除してもよろしいですか？
-
+    graphiql:
+      name: GraphiQL
   #------------------------------------------------------------------------------------
   # API
   #------------------------------------------------------------------------------------

Resource/template/admin/OAuth/graphiql.twig

@@ -0,0 +1,40 @@
+<html>
+  <head>
+    <title>GraphiQL - EC-CUBE API</title>
+    <link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
+  </head>
+  <body style="margin: 0;">
+    <div id="graphiql" style="height: 100vh;"></div>
+
+    <script
+      crossorigin
+      src="https://unpkg.com/react/umd/react.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/graphiql/graphiql.min.js"
+    ></script>
+
+    <script>
+      const graphQLFetcher = graphQLParams =>
+        fetch('{{ url('admin_api_graphiql_api') }}', {
+          method: 'post',
+            headers: {
+                'Content-Type': 'application/json',
+                'ECCUBE-CSRF-TOKEN': '{{ csrf_token(constant('Eccube\\Common\\Constant::TOKEN_NAME')) }}'
+            },
+          body: JSON.stringify(graphQLParams),
+        })
+          .then(response => response.json())
+          .catch(() => response.text());
+      ReactDOM.render(
+        React.createElement(GraphiQL, { fetcher: graphQLFetcher }),
+        document.getElementById('graphiql'),
+      );
+    </script>
+  </body>
+</html>