Block Bindings: Allow async call in getValues API
#66962
Draft
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
SantosGuillamot
added
[Type] Enhancement
|
Size Change: +209 B (+0.01%) Total Size: 1.82 MB
ℹ️ View Unchanged
|
|
Interesting, what blockers did you encounter with using custom data stores that natively support async operations, through selectors and resolvers including the necessary caching layer? |
I am not sure I follow. Do you mean creating custom data stores for each bindings source that need async calls? |
You can create one data store in the plugin. It would be best to know what is currently possible to understand better how to improve the experience. Here are some docs:
|
gziolo
reviewed
Nov 13, 2024
| * @return {Object} The values obtained from calling `getValues` asynchronously. | ||
| */ | ||
| export function asyncBlockBindingsGetValues( state, source, args ) { | ||
| return state.asyncBlockBindingsGetValues[ args.clientId ]?.[ source.name ]; |
There was a problem hiding this comment.
args is a very complex object:
I'm curious how it will behave with resolvers knowing that clientId differs between blocks, bindings might change upon user interaction, and the same might happen to the context.
There was a problem hiding this comment.
At some point, I was using Map to use args as the key and it was "working". Maybe we could explore that possibility if needed?
|
I know @chriszarate and @maxschmeling have done some work in this area and may have feedback. |
|
I've been testing this a bit further based on the suggestions and, without this pull request, this code to make async calls work as suggested by @gziolo 👍 const gravatarStore = createReduxStore("gravatar-store", {
reducer: (state = {}, action) => {
switch (action.type) {
case "RECEIVE_GRAVATAR_DATA":
return { ...state, [action.id]: action.data };
}
return state;
},
selectors: {
getGravatarData: (state, id) => {
return state[id];
},
},
resolvers: {
getGravatarData:
(id) =>
async ({ dispatch }) => {
const response = await fetch(
"https://api.gravatar.com/v3/profiles/" + id
);
const result = await response.json();
dispatch({
type: "RECEIVE_GRAVATAR_DATA",
id,
data: result,
});
},
},
});
register(gravatarStore);
registerBlockBindingsSource({
name: "santosguillamot/gravatar",
getValues: ({ bindings, select, context }) => {
const { getEditedEntityRecord } = select(coreStore);
const newValues = {};
for (const [attributeName, source] of Object.entries(bindings)) {
const { key, field } = source.args;
const { gravatar_id: id } =
getEditedEntityRecord("postType", context?.postType, context?.postId)
.meta || {};
const data = select(gravatarStore).getGravatarData(id);
newValues[attributeName] = data?.[key || field];
}
return newValues;
},
});It is reactive and it looks cleaner. I'll keep exploring in this pull request if it can be abstracted so sources don't need to create their own store. |
|
In the example above, you can make the code even more concise, example: reducer( state = {}, { data, id, type } ) {
return 'RECEIVE_GRAVATAR_DATA' === type ? { ...state, [ id ]: data } : state;
},Overall, it's 20-30 lines of code to register a store. If someone is familiar with the concept, then having another abstraction might make it even harder to reason about. However, I'm looking forward to what you come up with. |
|
Thank you for updating the documentation - https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/ |
17 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
In this pull request, I'm exploring how to allow the possibility of making async calls in the
getValuesAPI. I can see many external sources wanting to call external APIs withfetch/apiFetch, and they need to beasyncand wait for the result to show it in the editor. Here is an example using the Gravatar API:Gravatar.API.mp4
In
trunk, it was shows the fallback value because it doesn't wait for the response:Why?
I believe async calls should be supported and we need to explore the best way to do it.
How?
In this case, I'm creating a wrapper resolver that calls
source.getValuesasynchronously. Then, depending if the callback is async or not, we callgetValuesdirectly or with this new wrapper.I am not sure if this approach is correct, but it seems to work. It seems in other scenarios we are using
resolversfor doing async calls.@gziolo I'd love to know your thoughts. I remember you mentioning the possibility of using thunks, so I'm happy to explore that if you consider it better.
Testing Instructions
I still need to think how tests could look like.