Skip to content

[try] Image Size networking#1453

Closed
etoledom wants to merge 5 commits intodevelopfrom
try/image-size-networking
Closed

[try] Image Size networking#1453
etoledom wants to merge 5 commits intodevelopfrom
try/image-size-networking

Conversation

@etoledom
Copy link
Copy Markdown
Contributor

@etoledom etoledom commented Oct 16, 2019

This PR implements apiFetch to get the media object, and set the corresponding image URL when the image size is changed on an image block.

The wpcom specific code is located in this repo. And the needed information (authentication headers and site id/slug) are provided via initial props from the parent app.

This can only be tested on WPiOS for now, and only works on WPCom sites, as a first step.

gutenberg PR: WordPress/gutenberg#17979
WPiOS PR: wordpress-mobile/WordPress-iOS#12706

To test:

Update release notes:

  • If there are user facing changes, I have added an item to RELEASE-NOTES.txt.

@etoledom
Copy link
Copy Markdown
Contributor Author

Even though it's a draft, please feel free to comment on this approach 👍

}

if let extraHeaders = dataSource.extraHTTPHeaders {
initialProps["extraHTTPHeaders"] = extraHeaders
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would try to keep auth tokens away from initial props since react native seems to aggressively log those, and we shouldn’t log tokens

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes that makes sense. This was the easier way to make it work.

And also we will need to refresh it when the user switches the blog from the editor, avoiding fetching it on every network call.

/**
* External dependencies
*/
import { fetchRequest } from 'react-native-gutenberg-bridge';
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this from an older attempt or I’m missing where it’s used?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this was part of the tests making network from the parent apps. I plan to post a PR with this other approach.

export default ( setupApiFetch = ( siteSlug = '', headers = {} ) => {
apiFetch.use( apiFetch.createRootURLMiddleware( 'https://public-api.wordpress.com/' ) );
apiFetch.use( ( options, next ) => wpcomPathMappingMiddleware( options, next, siteSlug ) );
apiFetch.setFetchHandler( ( options ) => fetchHandler( options, headers ) );
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't need a custom fetch handler to inject headers, I got this one working in our meetup:
WordPress/gutenberg@109182d

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good!
Implemented a simpler approach, since we are passing a generic "extra headers" prop, not necessarily containing auth related fields.


export default ( setupApiFetch = ( siteSlug = '', headers = {} ) => {
apiFetch.use( apiFetch.createRootURLMiddleware( 'https://public-api.wordpress.com/' ) );
apiFetch.use( ( options, next ) => wpcomPathMappingMiddleware( options, next, siteSlug ) );
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Even if we don't have .org auth ready, we should make these conditional. The app should provide the root URL, and depending on whether that's *.wordpress.com or a site URL, the path mapping (and public-api root url) should be added automatically.

This also means that siteSlug might be inferred from the passed root URL, as it's only needed for WordPress.com requests.

@koke
Copy link
Copy Markdown
Member

koke commented Oct 17, 2019

Taking this out of the line comment because it's important enough:

...we are passing a generic "extra headers" prop, not necessarily containing auth related fields

I'd rather deal with auth separately and explicitly. I know this might seem premature but I've been scarred before.

If you look at the documentation for api-fetch, it supports passing an absolute url. I haven't seen any use case yet in core where apiFetch is called with anything other than a relative path, but it's a real possibility.

Core doesn't have to worry about that, because it uses cookie-based authentication, and browsers will do the worrying about where to send each cookie. My middleware implementation was also too naive, and didn't check where it was sending the request before injecting a token 🤦‍♂

I think we have two options:

  • Using a custom fetch handler: we know that at this point nothing else should modify the request, and we can decide there if the header needs to be added based on host name. However, we would be forking the default handler and losing any future improvements.
  • Using a middleware, but instead of providing just a token, we pass a pair of token and a hostname/pattern where it's ok to send that token. I prefer this solution, but for extra safety we should investigate ways to add "priorities" to middleware and ensure this runs after every other middleware has had a chance to modify the request.

I think we can easily build the first today, but I'd love for us to invest in the second for a longer term solution.

@etoledom
Copy link
Copy Markdown
Contributor Author

etoledom commented Oct 17, 2019

I'd rather deal with auth separately and explicitly. I know this might seem premature but I've been scarred before.

That makes total sense. Will take a look at it.

This is one of the reasons I also like the option of doing the networking bits from the parent apps: #1455

But I'm not in favor of any option in particular (yet), so I'm happy to continue improving this approach too.

@hypest hypest modified the milestones: 1.16, 1.17 Nov 1, 2019
@etoledom
Copy link
Copy Markdown
Contributor Author

etoledom commented Nov 19, 2019

Closing this in favor of #1455

@etoledom etoledom closed this Nov 19, 2019
@SergioEstevao SergioEstevao deleted the try/image-size-networking branch April 17, 2020 09:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Media [Type] Enhancement Improves a current area of the editor

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants