New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
await calls in code blocks #36
Comments
I was testing this just today (I just discovered this plugin today) and the async/await works with useEffect, you need to set async on the effect function itself. The way I have it is like this: const [data, setData] = useState({});
...
useEffect(async () => {
const request = await fetch('url');
const processedData = await request.json();
setData(processedData.message)
}, []); Not sure how you have your code. One thing to note is that I'm using the Component folder feature (I have a separate folder for all my React components and I call them somewhere else). One thing to keep in mind and be aware when using async/await to perform fetch requests (specially to APIs) is that, when Obsidian detects a change when Live Preview is enabled (which is the default), it runs the formatter again on the entire note, which in return, triggers the React re-render cycle for the entire note, which runs the useEffect again. If the note is being edited heavily, it will trigger an API request/useEffect render each time it detects a change, even if it's just one character. This could lead to API rate limits or performance hits if the file being loaded is large. |
Yea, thanks for the performance heads up, that's good to take into acount... though My issues lie with using the The |
Don't know what's the usage that you currently have for components, but it doesn't seem to be the one indicated by the developer. The current usage for the block/inline jsx which is defined by If you want to define a component, you still need to define it on the component block (using the triple tick and using Trying to do something like the following code will never work or will take time to be supported (if the developer deems it necessary):
or
One thing to keep in mind is the syntax to define component blocks, it has to follow the syntax If you want, you can post the code block you're trying to create (sanitize any private information first before posting it here) and we can have a look |
I'm not trying to define a component, I'm trying to use one with awaited data. I don't think i should need to make a different new component and then invoke it in a separate block every time I need to await anything. That would lead to multiple blocks required for each file just to re-use a component, which defeats the purpose of using react components imho.
Yes, I am aware you can't use I want to do something like: (in a
And since a lot of internal obsidian data fetching functions are async, I can't avoid using await easily here. |
Just pass the path to the component and have the component do the fetching |
Yea, this is probably my best option, though having to do that each time will be a bit annoying. I do wish we'd just be able to use await though haha. |
I have found useEffect as well as the
await
keyword cannot be used in thejsx:
non-component blocks,I'm trying to use an async function to load file data before passing it to a react component, if you know any workarounds I'd greatly appreciate it. Thanks!
Error:
The text was updated successfully, but these errors were encountered: