I've set up an apollo federation architecture accessible via a gateway. I want to access it via gatsby using the official plugin gatsby-source-graphql. I've followed their documentation and attempted to include the plugin with the "simple" example.
When I run yarn build on my gatsby project I get the following termanal output:
success onPreInit - 0.048s
success initialize cache - 0.033s
success copy gatsby files - 0.139s
success Compiling Gatsby Functions - 0.239s
success onPreBootstrap - 0.258s
success createSchemaCustomization - 0.003s
ERROR #11321 PLUGIN
"gatsby-source-graphql" threw an error while running the sourceNodes lifecycle:
Source GraphQL API: HTTP error 400 Bad Request
Error: Source GraphQL API: HTTP error 400 Bad Request
- fetch.js:11 exports.fetchWrapper
[yotee.co]/[gatsby-source-graphql]/fetch.js:11:11
- task_queues:96 processTicksAndRejections
node:internal/process/task_queues:96:5
My gatsby-config.js is this:
module.exports = {
siteMetadata: {
url: "https://www.XXXX.co",
title: "XXXX",
description: "",
},
plugins: [
{
resolve: 'gatsby-source-graphql',
options: {
typeName: 'Gateway',
fieldName: 'gateway',
url: 'https://XXXXXX'
}
},
"gatsby-plugin-styled-components",
"gatsby-plugin-gatsby-cloud",
"#chakra-ui/gatsby-plugin",
"gatsby-plugin-react-helmet"
],
};
The error "Source GraphQL API: HTTP error 400 Bad Request" is extremely vague, and I'm unable to get a more verbose message error.
What can I do to better understand this error and solve it?
The gatsby plugin will attempt to retreive the schema from your apollo-server. Ensure that introspection is enabled in production so this step does not fail.
{"extensions":{"code":"GRAPHQL_VALIDATION_FAILED"},"level":"warn","locations":[{"column":3,"line":2}],"message":"GraphQL introspection is not allowed by Apollo Server, but the query contained __schema or __type. To enable introspection, pass introspection: true to ApolloServer in production"}
By:
const server = new ApolloServer({
// other properties
introspection: true
});
I disabled all plugins on the server except point-of-view.
fastify.register(require('point-of-view'), {
engine: {
nunjucks: require('nunjucks')
},
templates: 'server/views',
includeViewExtension: true
})
The handler is calling the view function.
reply.view('/v1/main', {
nonce: nanoid(1),
token: nanoid(1)
})
The complete error message is:
{"level":50,"time":1547208496144,"msg":"client error","pid":16013,"hostname":"jer-ryzentwo","err":{"type":"Error","message":"Parse Error","stack":"Error: Parse Error","bytesParsed":0,"code":"HPE_INVALID_METHOD","rawPacket":{"type":"Buffer","data":[22,3,1,2,0,1,0,1,105,3,3,167,247,206,59,236,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]}},"v":1}
{"level":50,"time":1547208496145,"msg":"client error","pid":16013,"hostname":"jer-ryzentwo","err":{"type":"Error","message":"Parse Error","stack":"Error: Parse Error","bytesParsed":0,"code":"HPE_INVALID_METHOD","rawPacket":{"type":"Buffer","data":[10,0,1,0,2,2,20]}},"v":1}
I cannot pinpoint the source of this issue.
Any idea what and why a HPE_INVALID_METHOD error is being generated?
My server-side policy signing code is failing on this line:
credentialCondition = conditions[i]["x-amz-credential"];
(Note that this code is taken from the Node example authored by the FineUploader maintainer. I have only changed it by forcing it to use version 4 signing without checking for a version parameter.)
So it's looking for an x-amz-credential parameter in the request body, among the other conditions, but it isn't there. I checked the request in the dev tools and the conditions look like this:
0: {acl: "private"}
1: {bucket: "menu-translator"}
2: {Content-Type: "image/jpeg"}
3: {success_action_status: "200"}
4: {key: "4cb34913-f9dc-40db-aecc-a9fdf518a334.jpg"}
5: {x-amz-meta-qqfilename: "f86d03fb-1b62-4073-9458-17e1dfd8b3ae.jpg"}
As you can see, no credentials. Here is my client-side options code:
var uploader = new qq.s3.FineUploader({
debug: true,
element: document.getElementById('uploader'),
request: {
endpoint: 'menu-translator.s3.amazonaws.com',
accessKey: 'mykey'
},
signature: {
endpoint: '/s3signaturehandler'
},
iframeSupport: {
localBlankPagePath: '/views/blankForIE9Support.html'
},
cors: {
expected: true,
sendCredentials: true
},
uploadSuccess: {
endpoint: 'success.html'
}
});
What am I missing here?
I fixed this by altering my options code in one small way:
signature: {
endpoint: '/s3signaturehandler',
version: 4
},
I specified version: 4 in the signature section. Not that this is documented anywhere, but apparently the client-side code uses this as a flag for whether or not to send along the key information needed by the server.
so far I've managed to create two webhooks by using their official gem (https://github.com/bigcommerce/bigcommerce-api-ruby) with the following events:
store/order/statusUpdated
store/app/uninstalled
The destination URL is a localhost tunnel managed by ngrok (the https) version.
status_update_hook = Bigcommerce::Webhook.create(connection: connection, headers: { is_active: true }, scope: 'store/order/statusUpdated', destination: 'https://myapp.ngrok.io/bigcommerce/notifications')
uninstall_hook = Bigcommerce::Webhook.create(connection: connection, headers: { is_active: true }, scope: 'store/app/uninstalled', destination: 'https://myapp.ngrok.io/bigcommerce/notifications')
The webhooks seems to be active and correctly created as I can retrieve and list them.
Bigcommerce::Webhook.all(connection:connection)
I manually created an order in my store dashboard but no matter to which state or how many states I change it, no notification is fired. Am I missing something?
The exception that I'm seeing in the logs is:
ExceptionMessage: true is not a valid header value
The "is-active" flag should be sent as part of the request body--your headers, if you choose to include them, would be an arbitrary key value pair that you can check at runtime to verify the hook's origin.
Here's an example request body:
{
"scope": "store/order/*",
"headers": {
"X-Custom-Auth-Header": "{secret_auth_password}"
},
"destination": "https://app.example.com/orders",
"is_active": true
}
Hope this helps!
I would like to change the "Upload failed" message to one returned from my server-side processing.
I can see the message I want in the onError callback but I'm not sure how to used that instead of the default message.
Thoughts, examples or further reading advice welcome (new here).
The implementation of what you're trying to do depends on whether you are using Fine Uploader Basic/Core or Regular/UI. This is because UI mode offers some extra goodies for displaying error messages and such.
A few properties/options that may benefit you:
Fine Uploader Basic/Core mode
text.defaultResponseError
Message sent to the onError callback if no specific information about the error can be determined. This is used if the server indicates failure in the response but does not include an “error” property in the response and the error code is 200 (XHR only)
var uploader = new qq.FineUploaderBasic({
/* ... */
text: {
defaultResponseError: "Oh noes! Upload fail."
}
});
The documentation on 'text'
Fine Uploader Regular/UI mode
failedUploadTextDisplay.mode option
Valid values are “default” (display the text defined in failUploadText next to each failed file), “none” (don’t display any text next to a failed file), and “custom” (display error response text from the server next to the failed file or Blob).
failedUploadTextDisplay.responseProperty option
The property from the server response containing the error text to display next to the failed file or Blob. This is ignored unless mode is “custom”.
var uploader = new qq.FineUploader({
/* ... */
text: {
defaultResponseError: "Oh noes! Upload fail."
},
failedUploadTextDisplay: {
mode: 'custom', // Display error responses from the server.
responseProperty: 'errorMsg' // Default is 'error', change this to match the
// property that contains the error message from
// your server
}
});
The documentation on failedUploadTextDisplay
For people who still use FineUploaded and above does not work, that is because the key is not changed to failUpload.
Usage for a custom message on UI end would be
text: {
failUpload: 'Your upload faile message goes here
},
More details can be found here - https://docs.fineuploader.com/branch/master/upgrading-to-4.html
If you want to display the server-side message, you can do it the below way:
failedUploadTextDisplay {
mode: 'custom',
responseProperty: 'server side error key goes here'
}
If you wish to completely remove it, i.e, not show the message below file if file upload has failed, use below
failedUploadTextDisplay {
mode: 'none'
}