Prevent an error in `<ServerSideRender>` by allowing `POST` request #21068

kienstra · 2020-03-23T01:01:18Z

Description

Allows optionally using POST requests in <ServerSideRender> to prevent an error when the attributes object is too big.

<ServerSideRender> uses GET requests in apiFetch(), but they can fail when the attributes object is too big:

This uses @swissspidy's suggestion in #16396 (comment) to allow using POST requests for large attributes.

It adds an optional prop httpMethod, and if it's 'POST', it causes <ServerSideRender> to make POST requests. It's prevented errors in my testing.

Also, it depends on WordPress/wordpress-develop#196.

Reported in:
#19935
#16396 (comment)
https://wordpress.org/support/topic/error-loading-block-the-response-is-not-a-valid-json-response-2/

How has this been tested?

wp core update --version=5.5-RC1 # or any version 5.5+, as this depends on Allow POST requests in endpoint for ServerSideRender block component wordpress-develop#196, which was merged into 5.5
checkout this PR's branch and do npm install && npm run dev
clone https://github.com/kienstra/ssr-demo into your plugins/ directory in order to test this PR
Follow the Usage instructions to test this PR with the httpMethod prop
Expected: even a very large attributes object doesn't cause an error in the <ServerSideRender> component
Actual: same as expected
Regression testing on Core blocks that use <ServerSideRender> looks good, like 'Archives', 'Latest Comments', and 'Latest Posts'

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

There can be an issue if the attributes object is big, and the GET request fails and causes an error message in the block. This allows POSTing the attributes, preventing the error message. See the PR to Core supporting the POST request.

There are 2 failed e2e tests, though it doesn't look like they're caused by this PR.

kienstra · 2020-03-23T02:36:40Z

The E2E test failures above don't look to be related to this PR, but maybe I missed something.

Now, Core accepts POST requests, with the attributes in an array. WordPress/wordpress-develop@5460e0d

kienstra · 2020-05-04T22:00:49Z

Now that WordPress/wordpress-develop@5460e0d was merged, this PR's dependency is satsfied.

There was a failed e2e test: https://github.com/WordPress/gutenberg/pull/21068/checks?check_run_id=925354338#step:7:15 This doesn't look related to this PR, but I don't know

kienstra · 2020-07-29T23:21:47Z

Hi @ocean90,
Hope you're doing well.

Would you be able to review this, or point me to someone who could?

The Core patch for this is merged. It now has the latest from master, and still works.

Thanks, Dominik!

packages/server-side-render/README.md

As Pascal mentioned, it's easier to understand what this does.

ocean90

Would be good to document this change in CHANGELOG.md.

packages/server-side-render/src/server-side-render.js

Commit Dominik's suggestion to only allow POST and GET requests Co-authored-by: Dominik Schilling <dominikschilling+git@gmail.com>

Following https://github.com/WordPress/gutenberg/tree/9bebc902f0c9d2c6d9ec47411250ea20cf038966/packages#maintaining-changelogs

kienstra · 2020-08-03T19:02:40Z

Hi @ocean90,

Would be good to document this change in CHANGELOG.md.

Good idea, the CHANGELOG.md entry is now added.

JohnRDOrazio · 2020-08-12T05:22:32Z

Was this patch not included in 5.5?

swissspidy · 2020-08-12T10:01:59Z

@JohnRDOrazio No. As you can see this PR has not been merged yet.

JohnRDOrazio · 2020-08-14T22:14:28Z

ok, is there a workaround I can use until it's merged? A filter I can use to use POST instead of GET for ServerSideRender?

kienstra · 2020-08-15T18:46:21Z

There's not really a workaround, other than forking this component. It'd be great if this could be merged, I really appreciate the reviews here.

kienstra · 2020-08-16T17:51:06Z

Thanks a lot for merging this!

WordPress/gutenberg#21068

JohnRDOrazio · 2020-08-21T16:56:06Z

Thanks a lot for merging this!

yes thank you for merging this, I have just updated the Gutenberg plugin on one of my websites, and I tested using httpMethod: 'POST' and I can confirm it is working well!

kienstra · 2020-08-21T22:02:23Z

Great to hear, thanks a lot for testing it!

Add a prop to make POST instead of GET requests

ffeaac9

There can be an issue if the attributes object is big, and the GET request fails and causes an error message in the block. This allows POSTing the attributes, preventing the error message. See the PR to Core supporting the POST request.

kienstra mentioned this pull request Mar 23, 2020

Allow POST requests in endpoint for ServerSideRender block component WordPress/wordpress-develop#196

Closed

kienstra added 2 commits March 22, 2020 19:19

Empty commit to trigger Travis build

f58df0d

There are 2 failed e2e tests, though it doesn't look like they're caused by this PR.

Another empty commit to trigger Travis build

f28b7a0

kienstra added 3 commits March 23, 2020 16:38

Another empty commit to trigger build

c033f94

Pass attributes in an object, as that's what Core now accepts

be35af5

Now, Core accepts POST requests, with the attributes in an array. WordPress/wordpress-develop@5460e0d

Merge branch 'master' into add/ssr-post-support

4b55995

ocean90 added the [Package] Server Side Render /packages/server-side-render label Jun 8, 2020

ocean90 mentioned this pull request Jun 8, 2020

POST method instead of GET for ServerSideRender, and JSON representation of attributes #23004

Closed

kienstra added 2 commits July 29, 2020 17:29

Merge branch 'master' into add/ssr-post-support

7edfc3e

Empty commit to trigger a build

6eb0b08

There was a failed e2e test: https://github.com/WordPress/gutenberg/pull/21068/checks?check_run_id=925354338#step:7:15 This doesn't look related to this PR, but I don't know

swissspidy reviewed Jul 30, 2020

View reviewed changes

packages/server-side-render/README.md Outdated Show resolved Hide resolved

Change the prop to httpMethod, as it's more accurate

b94b760

As Pascal mentioned, it's easier to understand what this does.

swissspidy added the Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code label Jul 30, 2020

Add a trailing comma, remve trailing whitespace

4215311

ocean90 requested changes Aug 3, 2020

View reviewed changes

packages/server-side-render/src/server-side-render.js Outdated Show resolved Hide resolved

kienstra and others added 4 commits August 3, 2020 13:16

Update packages/server-side-render/src/server-side-render.js

6ce918a

Commit Dominik's suggestion to only allow POST and GET requests Co-authored-by: Dominik Schilling <dominikschilling+git@gmail.com>

Add a CHANGELOG.md entry for the new prop

45b7185

Following https://github.com/WordPress/gutenberg/tree/9bebc902f0c9d2c6d9ec47411250ea20cf038966/packages#maintaining-changelogs

Add the protocol to the URL

e810c58

Use markdown link syntax for the PR link

7f695e7

ocean90 approved these changes Aug 3, 2020

View reviewed changes

swissspidy approved these changes Aug 15, 2020

View reviewed changes

swissspidy merged commit 068064a into WordPress:master Aug 15, 2020

github-actions bot added this to the Gutenberg 8.8 milestone Aug 15, 2020

ItsJonQ mentioned this pull request Aug 17, 2020

Bump plugin version to 8.8.0 #24601

Closed

lipemat added a commit to lipemat/js-boilerplate-gutenberg that referenced this pull request Aug 20, 2020

Add Gutenberg 8 arguments to ServerSideRender

5e362d8

WordPress/gutenberg#21068

kienstra deleted the add/ssr-post-support branch August 21, 2020 22:03

talldan mentioned this pull request May 10, 2021

<ServerSideRender /> component does not support blocks with lots of attributes #16396

Closed

Mamaduka mentioned this pull request Aug 24, 2022

ServerSideRender results in "Request-URI Too Long" #43549

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Prevent an error in `<ServerSideRender>` by allowing `POST` request #21068

Prevent an error in `<ServerSideRender>` by allowing `POST` request #21068

kienstra commented Mar 23, 2020 •

edited

Loading

kienstra commented Mar 23, 2020

kienstra commented May 4, 2020 •

edited

Loading

kienstra commented Jul 29, 2020 •

edited

Loading

ocean90 left a comment

kienstra commented Aug 3, 2020

JohnRDOrazio commented Aug 12, 2020

swissspidy commented Aug 12, 2020

JohnRDOrazio commented Aug 14, 2020

kienstra commented Aug 15, 2020 •

edited

Loading

kienstra commented Aug 16, 2020

JohnRDOrazio commented Aug 21, 2020 •

edited

Loading

kienstra commented Aug 21, 2020

Prevent an error in <ServerSideRender> by allowing POST request #21068

Prevent an error in <ServerSideRender> by allowing POST request #21068

Conversation

kienstra commented Mar 23, 2020 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

kienstra commented Mar 23, 2020

kienstra commented May 4, 2020 • edited Loading

kienstra commented Jul 29, 2020 • edited Loading

ocean90 left a comment

Choose a reason for hiding this comment

kienstra commented Aug 3, 2020

JohnRDOrazio commented Aug 12, 2020

swissspidy commented Aug 12, 2020

JohnRDOrazio commented Aug 14, 2020

kienstra commented Aug 15, 2020 • edited Loading

kienstra commented Aug 16, 2020

JohnRDOrazio commented Aug 21, 2020 • edited Loading

kienstra commented Aug 21, 2020

Prevent an error in `<ServerSideRender>` by allowing `POST` request #21068

Prevent an error in `<ServerSideRender>` by allowing `POST` request #21068

kienstra commented Mar 23, 2020 •

edited

Loading

kienstra commented May 4, 2020 •

edited

Loading

kienstra commented Jul 29, 2020 •

edited

Loading

kienstra commented Aug 15, 2020 •

edited

Loading

JohnRDOrazio commented Aug 21, 2020 •

edited

Loading