5. Proxy GraphQL request from React to Shopify #14
Conversation
| @@ -11,7 +11,7 @@ class VerifyCsrfToken extends Middleware | |||
| * | |||
| * @var array | |||
| */ | |||
| protected $except = [ | |||
| protected $except = ['graphql' | |||
There was a problem hiding this comment.
The requests do not have csrf token, however I believe that verifying jwt is enough to ensure that the request is legit.
MuhammadFarag
changed the title
MuhammadFarag
force-pushed
the
make-graphql-requests
branch
from
e8c04ea
to
6d6cf9e
Compare
| @@ -11,7 +11,7 @@ class VerifyCsrfToken extends Middleware | |||
| * | |||
| * @var array | |||
| */ | |||
| protected $except = [ | |||
| protected $except = ['graphql' | |||
| query: TEST_QUERY | ||
| }) | ||
| .then(result => console.log(result)); | ||
|
|
There was a problem hiding this comment.
We can still use the other components of the node app here, but continue to use the apollo client.
There was a problem hiding this comment.
Sure, baby steps :) https://github.com/orgs/Shopify/projects/1185#card-59723312
tests/Feature/ProxyGraphqlTest.php
Outdated
| $client = $this->createMock(ClientInterface::class); | ||
| $factory = $this->createMock(HttpClientFactory::class); |
There was a problem hiding this comment.
I wonder if there's a simpler way of doing this - I feel like this test is relying a little bit too much in the library's implementation, and I'm wondering if it would be possible to mock the behaviour a little farther up the call tree so we mock library components / methods rather than its internal calls.
There was a problem hiding this comment.
I agree that it depends on the library implementation. I am not sure if we can mock something up the stack though. We can do that exercise separately for the testability of the library.
There was a problem hiding this comment.
I think the way we mocked the other tests should work just fine here, though!
There was a problem hiding this comment.
I cleaned it up a bit
routes/web.php
Outdated
|
|
||
| Route::post('/graphql', function (Request $request) { | ||
| $result = Utils::graphqlProxy($request->header(), $request->cookie(), $request->getContent()); | ||
| return $result->getDecodedBody(); |
There was a problem hiding this comment.
I think we probably want to return proxy call headers here as well.
There was a problem hiding this comment.
Please, check if the change I made is what you meant?
Route::post('/graphql', function (Request $request) {
$result = Utils::graphqlProxy($request->header(), $request->cookie(), $request->getContent());
return response($result->getDecodedBody())->withHeaders($result->getHeaders());
});
MuhammadFarag
force-pushed
the
add-react-app-bridge
branch
from
bc5776e
to
62adb6b
Compare
MuhammadFarag
force-pushed
the
make-graphql-requests
branch
from
6d6cf9e
to
e004e06
Compare
MuhammadFarag
force-pushed
the
make-graphql-requests
branch
from
e004e06
to
cd7f84f
Compare
|
I had following error when app is running on my server
On localhost with ngrok it works fine |
app-bridge-react and react-apollo
The plan was initially to mimic the implementation in https://github.com/Shopify/shopify-app-node/blob/master/pages/_app.js. However,
app-bridge-reactandreact-apolloare not compatible with React 17, which is what Laravel is using. As a result I have opted to using Apollo client directly.Potential issue with graphql proxy
Should be fixed when Shopify/shopify-api-php#74 is merged
Query variables get transformed from a JSON object to an array.
{"variables":{},"query":"{\n shop {\n name\n __typename\n }\n}\n"}Utils::graphqlProxythat payload is decoded with the flag for associative array resultjson_decode($rawBody, true)GraphQ->queryit gets encoded as{"variables":[],"query":"{\n shop {\n name\n __typename\n }\n}\n"}Todo:
X-Shopify-API-Request-Failure-Reauthorize-Url