Fetching data from an API using a Data primitive

We're building a reporting engine using react-pdf.
The JSX templates can be:
- downloaded or uploaded by users
- run on the repl
- passed to a node server that returns the rendered pdf

We were trying to fetch data from within the report template using a hook or custom component but found that the report renders before the data is fetched.

### Current Behaviour:
The data is fetched (console logged) but the report is already rendered because react-pdf won't wait for this async request to be fetched.
[Repl Share Link](https://react-pdf.org/repl?code=3187b0760ce02e0040ae102980c5156002c605e1802806f19130013001c4012cc5805f0128700f86020281865125806d004e88225488800d0c2450012b0d14802e8e1872021b02800e812200ca50d544478c1c0036e61806e4eddc34187d1008120064e901455fbe5b9d53474900c8c4ccd2c6cec791cf9cc40d5486801cd3cd000641292c193fd551035b575438cf0a004e110a2ed028a90bc00cc1b1134f0f099b15838b8b863619bd03000448cd455da58d8ec7a61ca013ca666660730f04829a96819a696b8b4a03048da84203b584eb400ac21c1dbb77667f70ec0dbafc0cf161e67a4e4441c4cde602897cb88c1daecb4c0232acd6ae0f8c440e644169e2c93c001c85c0274648b10c7b882b40d1a1a92c733687dba20ae3493289149e01aa4a4302418c5b2ece8dc68561616e01130a9bb6f2f8047cf72b266741d9d0393d15b0d46ed395d1247c45354b842281c00460360c148a300170c04e0a090c1e2f49cae34530597b11dec3e8c0008a702a0003c40c671a53a20e580108d864935bb2a96228ab9b85d2a1068475a506850534008830502839020c6803d3e701e4730691018446905cfb39b90a8a02ae4240005b7ce51a01074d837a0e447235118d0da87186d1a6acd685d7eaf076000f10c40c0383364850660ed670005353251052281cc91d8023410fc22d0008c40a4399d1d7bb59c0055105ed829e8f2783d22205a43a245c5cb125ea20a43de0f0007e30000c242184a40c0003b9500704e85000b4e42900d0c0e0782302cef9b3eaf98133086a30c00019051a3a1828890c90a1ac0000c30000fc301e1002410e5a3366a39078150930cebb2715c13e2f9ae041505a150a41d0045116b9e15c3e27869a126befb99ec7bbee790e7780072200d16a22992730d283e4a7691f9e93f940c85227782efa87a5425cbe9ee5595a63000b26a1809819984459786696f97e882e9514fe6a1c0073b8779f95432495398869ee504b8001ba05c6040e6711e1400927c6ee2a6d9d167e678fe54395881590f04002300d83a6f9bd53bb08f98008e9ea79c60008c57390c93a6787e6244f411555316d55a0407005e8e540ce74d33141fc400b73abc430095a687a7bb94e44f9a5bd8643d654000cffa82c8825c2e300d7499558654cb36200dc3006072692c909943168957b9837797b85d01505181a8e1685c5759925cd3577efb24977a555e3ea703eae61c0c91a802265be4c0d0f05920f94b9cc265802d85e420c074cc0fd5502e0991a3b8468082ba48ccec395736702602663988336940b3950c0395503976d632e3bf7fde620324fc4103ab814005e63090301a8d0150963b39222444e13957e5a95c06a2486e300db7ea0d296a00c00b213aac99a02b8207b85a0c0002a98063222174f900c99cd800879ade55094b88255509eaa6d48a49d6c01ddbe66b31e6b74e60c2253e977deee270cfe5a5c6b5234717a24df78895522b423d86d5aa5ecb2e18045c1baac005ffab90a48b6341bd7b9a80023fd2a42ea63357a408f39037c9c38cb82b78db7e53083010f0201524d2dbf4686cd906a0075e0652714063e58630f0c03e3ebfa734e553e4e5882967be5a50b98bae6b6fc7f7c60bc7791339e6dd893084309ac78148040203681c0176a5dce8804165402017d70cc8215bff3dcab9199203e221ca41ee0ac600041a83ae975604cb401ee0848a098079d2ab123a601d9f180056c41f521f28410115b10b507c513880fe154250740db6421681db32eb8cc60dc0662492abf53dcccc4da132a173c3ba2054c9681612b2fadacc7b7209626416096350bad242a8836101b6a551201018da962a11fccd22e276f60beacc16c942c04ef6bcff828407640021d07f8d2620512093330902dc2553fa468bdb50eae2f482a5419106c2783768c630a98b612c2f96ebea2102f56452037654c89b770808dcbe0904b80944c5b86806e1ac0c0648143f51f15201510982f6260b0846a5131174a12eb00eee45c3eb2ac2f589aa8caac61385eb0ca8a3a47d34663e4c1b9b1802658ebf0a34f816c7eb48126561b0cd56f235f950668d23ca770f6e9ade2b5f138222ab3403dc7c24cb08600e122f09006066d71ad8ca00205798027a3a8285c7766f639b31b6de48132a5c3d62dcc80b8111c8b6fb089d921c3a790766c41a02a0af8f54c16184096ecc61c4b69ded3275f0e975da018c1391bc999130a12f5b3a900009719599b22fe1aace197c256e4171b5f2d6b420411a520f0c9486d7c2364f4bcd346c615f2632f85e0ea4ef4a8baa7c988970363a5a40bdceb240bd60accad926032c19ac2875f4d6272595d74aa8b8a837d1327804e774a794c363a650ca93c40130645468b455a44098bcc150066c82be7f893602070442d98f94c61a8624dcbeea74840d7c4d5ee444b2d480dd6e4ce249b5f60112b680fc8ca8f59eabd4ca4dcef958d91c329585d44808ac03a0d3a39a0f9c023e2f5d61a80e90b034596b188616b6c0e4eba93d738b9565c3e51851e8f2ce616da1574cb50b60a9ad61b77426b83661b3570f929397c42115c67850c90bbcefa148a1c4d637c693d508ebb269c18f36c522170e3aec76d2b4488728dd2b6342f874eebca5c972574d612b806c3005c4dde86b0033e4ab6975ed391719574bd0f1778b427e33a6005e13ede24cb575b1a00258203ad3013e97a980a8163794e663e4f431b3cac692a982dfd77d3fbfd78286a87790569eda0daa8dbe9ad53384a0ae6c1d558f0048ae01cc436e19f0eec4238ed028934250214b04000379db82db32094691268ccd51b315a8293d5c842b34406fbddb2722650249aae868db4402537003e5f59eed86f07dcf6f586b7cdc4403f9c844029a0ba143b58f2cd34b02eb38f21563b3ad8b1808acd0659e1a42cb25313aa4898605170d9684825ece2405d9d9ca8c00240a8e96302aacf4bdcaa33cb4a9cafab4e8319705f4969deb2e8619b191de5fa960f99a8d0ac78d7c6aea489d770366547a59bf1eb1430d1cb1a042736ecb10e2b85baa4b6ef130061b4aac8a1a3b8472d9b02a48058a5d61835b6b652fd86df7a4c2664bd045ab84cad895c2f77ca556ebf12c6174c0a5592642ab0a48cb4aaad46e78355402d50f0a0b806251e616210d6e2dd14f18da93bc5c2902e1ee32803344d9fa911b86201949a6bd3bbafd843bf730b5d0d9ee305dc396556033ea6577087c193c89b7e6a7243681c95f322305643525cd434280be64250cc73f5867b56530f413e20020b84e803758c37e4f09578430b642a024046d880375e2238cb020003b197479128582c323fac6062bc38e128d33ad5b68e001087f2a0815d068e2a17312a994b8d0adef7b85b1c8abab24124543417b84e9dd23e695f89a5d7f690e5a6cc9018079d142179f331ea8a5345ed98241317b8d69e51cc6f8e01ee2970b849626dd8f259982f4a13947acdbd31e2029edf8095129819877bbf8b713c2874bc94f757dc6cbbaec4c9693738d54eddd8c3132d984057b9fb7c600920fd9429101b77e08286c2c20b6dddf835cd648881fae8f98804c75f3e22fa37fe33e277747019bdcac37b8ef3666952445eb1a30e64b00712bd36737015c63000334b43438023900679176e65611d73f0362566151576a13a10377753af5ce3501a63790581e047233052e4254801191fb7ce1326c51f912501045f40a7613801ca28e61660b2071686de1a342565907918126f59e41d2b40262266395350db0ac51b2d945c29530719e7ae4717d44e36480001f9205d620529010032753368e0ca2432e125d28e47a14f43f64d7176dc7307fb2f12ac4aa12a1c852c63073d3d91800d75e96da13d0007178a52c0e93e2220be71804327ac44458e49045f6431be3570c16972d34a80bc78822b1d30971485c36034402b37ff6b0ca7788d402bc2ff58f212640ba673b4863676bc2e1010d010f03c9434347008d2c7704900f72211316f0c485f09260088b05913e34a82591202e1277036500b9547d2ba01d07d06f1000e95b166672b6e40a776641600f3205697175ed74d3c67880106ce5009a14e8c0a717058365540f3a3183ca66e2802e14a8b9b3dc38d3451805d642610607c04665218748a1d27870720c62552e06c609c1b87c61cd4907e51216e10681852ce7d8a957d643e2444d059e2dd6c53674367f10de0804aa02e4385bf44039875813107e2261f909b4fe0b8ff522736e0c35d43232a4d98264cf52ff4366da7a907877b4a02a977004521920d2616e0ca368d468ac4921444a6f19978d22b52b6ee0db4592f83db0e60275956af1a74f417a5b718074866e1ba24063f0ba2641917b10af31f5df7da6cf056350ff557d5693367b11261202841916fb5ad5d51389f26a0aac20a40f5d53ae4306936e4dd82f31f35d50f77fa5d54734f46734748362fa13849057903b0c74db11050102a4aa7256fa38d7d732e5675a04348fe08674d0ca2fa46f76578f03f129111558f7e59544825920949374a0ba18e56662108e7b336e1b829e2f77df30053f1d4fc71b4d915055014aa184fe64a12e15f4590bed7a16cb40d740ca55390acdc605e2f8a5822a5f8ddc95528a35573c25a15a27246a5235820006b104e821da3da13212a43a77469653a4a51b89de7097fb0515247fa77973521d3160f0bfa6316a71cc9c812045d2063473062f22874465dcb2a6ea73b23cc04d9206a26a61456a76a4ea06a0803ea01a2f2000262d07201c809a5d829a70a43c804fb27464d55bc8000916860b7bd7d55c416578321011ccf55a912f2967410e634a2266e600d4d6316331036409454bb4c40018060d132715a0dad33631334068e73363f5597da13485b565696184ea0b117d28ef1e847b6277d477121629b43e43026cb006b112164801e3c93c652e1dc0a15962cf696232ff106708047b63556497045b3652e74405d60949a004b6536f73c103b512e190bc3a338acd8cf267d5e7440b6e58f35d08026406b01000e0004d4030377d4512dde3f40df1701b84112b910e0671a13d17f4ece4c71a00977a46a89963cf4b4140be229e10e3361c7614fa4c2d4710db6c88916e47c61d8dc10acede1f2000290b0764d84a2666c32d0c32094d625a6791e675373b5cf32d0b55500f510e16e362c8105121d3e20ca0109eb3be0fe7365c47908cb39d2f873601042614c96c63aa1d52c072b180b114f0ba09510ab182647307e11262561f60a13595fca9d3baa114a034d3073205f0faa6f67006592954b92bc37050280162618125c0d2ca57cae361db530d151e4fae4fc9a017a3ac354c3e64ad993e75d480a6796a0becbdc2f28dd646c92c9b6013bf0fae1528032d7152528f4a95770ff92442ff60cadd7673e4b14b409c0aac32f4072f81a31d0dd9716352fe10030686966cf6eae6600915c24cc0f0971f90db75ad509d6a4d428d28ca84901e04bb1e671e28d0586a9758f2f7974097a4a660616732e117f2262b67dae813476c367289b676f660033069251117da136f2b0e8b9c8af1363ca626076fc4af8548c0a3e177696c5a6100267358d24176a9076a836938378f715f9440f1760b4a564f7052bd21d6100ce8105028ba42610e24073e12578369693e45b63f3fa740b4755a65a028626144b805e337072043498b608b6e04313e601133544c5c310db105cb1856b5ee34a41acfc9000951fa270af840a810645076926c4eaa75e4afca255b16be21e2403367df04543001d1f205cefa416514b8ac0354099eb3d70034878e9801849a6e9b2acfb4d5f6f2e2b73026e13a318b60980304fda1b8bda908d23006d2e8271a0aa158d09640f6e713d2214ceee1518ded324890c26468dfd1320cefcf31291125675aedb458b2e110d4ee45273096a1a0000e4aa0b15691b65ba0831193a632a9c8bcebd93af1115df2c521d028dfb4a800ee4e210524a9b2b8ab4ec6c803ed2e1134bd1dd62d667953f68533b6f8c556a2e463873a2c476475d822ab24cbaaf4c51f075a675b4e1d2c2212aafb1dd434e578a3e62ea9b1885194d8c48aff24811d73353440014020007ef7271b040a3432add1bc1372d855ed2e752e092f6c50ca586168608066b37c66d652646cb95558bfa6609b69f20454d64631b803d162dc91394c1abd4a14f534ed2e5f97f933d3511325106fad330099c8b4a6f6f20a90abab5755efaa558ec0a391230e98174be8f94a57a18a15625340d71e683d6cee170a832325c7334aa339c445166576ad106886ab169512ed8632e79063e6fa69d33d0db45741905344978c864802de99e62f56814a13a15d5619739ff54255511c94d60b154c7ae42e82335032f1711833475da83601021e41ce6e6128b98bc27e6152cae0118119e73006b32e15c58d1765b628eafa159469c82a390fcf132390d75d477009cb769457998ba189a3928461177a64e0fe26357f31768f37f7833d1f4ccfd1e005aab2cf9dc8f397a13c72aaa794162bb5242453dc01b53a3ae776b3346f0fa211263028a2505e372422bf41b8caa72658622b54529b4570f53f9f830ff1e753cf9193ac3e6e9ef6676a48a5819033afca3dc320adf072a9d53112462676779f51734a7af1e00f56012da492bbe8783f21c6e5b1dc9983dca5559a371d8a7a2a475bc92ad588ba2699894ee841c16c4f31d42c81cf91e49dded8b180349a182b53f9e2065d30f2bd54a021e1d9fa4d1fae0c574e7303e90d2a92fa99ce0633b5fe10b9dd629e5ce1c14a999824864861e9749915be47ec29cbcf001bf0e2a5c7303ac73dc7918e285a1774599107d92025923f1e7798ab6e5cc7974e84a41580e00042800792c02803ee4f0619aa4b74c3041913513e2730a126b7350285d57d2f232f9ada94e617240126f707003ed0bd165754dc8b93318569d7940f000424aa1903805e54063f4658a79bd973012d4d5b575234c953af4938db2e89649e2253402ee28e1f3461af84c35ce60f295d1e345ee45f618532d99a1f8cad9a2bb21ad8f1dbcf484a83564e08e3ae15ed9f18a33ae9956698a134cdff3d1b453b5a2f7edb49b038c0759a0a6df1802180b07490283481c937b3356e404a3966c6d6b1a3b265148363077e695c449585f4f6681164790f94252482f6b2e2104df60a54b910cbe1b61d88365613939fb46aa216e615c266699a263e0fcec3b26df5b086feb6fa59e00e4dc730263b505c92405f3d9142ddd82b68ae5694ca4f9196209d8128560bbcb2dd19d0f325c13778314f6073a52b624c90139964468234733919349f7e13de799901ffe74107d02a1fa85e6790ace8366d39b741d815bf341e24e89a7e27101f7ae4907aa13729b5773332954a060ee5f6789c31c5b5bd474b2d4eb9390e2a11d99f99d4aff7710848e70a1087dd37e2709373f1d87851f4ae2258439113eeb1866529bef6ae76d42a01ff7f52401e983773edc32c5dd81d44ee143a71e8703cd71d42f71e04caa2da0ad4b4a934343a8c51e3af6ace616e02ae3f500686db102937d8637d54b41eb94b7a512b70d3e711072b4b5c090105b1566671558efea90fc61d589083798127302f7beb2c25eaf47d313e07977b3b894f11369790abdc0ae63100e015d7930b620f795ef5378787e3066efc93f55c23ee962d2d54c77d2677b4dc55593274868e4ce4b47db9b927b34e9ced2e2fa58d3a613d4ee5ad61f2a76b4e961a65fa1a8a4805e2b646c9b6159907bf46f92ff02fd2102b5be46f28b709644a2983610e217375af80f5d916de5b1184f070e0d160bbcd1d1af7633660d424aabcf021d0762f10587e52a8a3e33db47374c3952e0bf18f93d586790fd144e490414f99a8341ccaae105e379bcc50ad0f925c25172f73e972be14721b74f08a8ecb1c5dd91f4c360f7ffe7f3532ad416808017700fb61913ac7d28811ea84e0570490290a1f12fc47c3df9971bb837e2132480bca25e2c1a790e6a29b6663b38c012f13578a05ec676c5b106754ce15a7a7808969abb013b1ef9544fc56d11cdd76e05934b1aa5e6c0cb68e2454b8e87c2101fa4074a2d0782ba5fc675c00e10edbe85013cf3598c1e44c3afa599936a76292b94c0a656c69f8e9854ee243538b8d61cacf1ad90f177086465c3218b90d222e731e10802027d0618282ad7c60cb6e17709ac46030912a800003000090100f4188003068d80083007cc0c01dc1360d241d838407406705e101808046f40810fc1d340220842c0804405c12e0d32eb84886d81d80c801c6968084009e4f918a0a909f46361cc14d0e885038400108a485200e20ec02d46002942b303983cc21612ecb401fc32405948e460013615b0f856fa2543176f981ca10d0000ccf9822a8001f51f0000690001a8000d84001230003aa5742f081c52008c39b013080006800138d401ae0d73ec0a000d074413a1aa0ae87b20a800c06783d021c0d009085822940a9043853410a1ec08715286f03ce1a086e495e06f0ef09d8092d2308f86bea9a0461000564a98822520bee5f40bf94d0f30e8470231209184629eac71aa480844a22fe176055a1220811cb01c6a719b5888053411140002c95344706b963447b52853d9dc2350e246d0190023273009426006508a855437e10e86e48bc82b00202247ca049154032469a08684451a46490e91a9430023235702e01644f415fc09e3003c23b302d85342522988dc95542d43968048f2467c0b80ad0a8029234d19234a9baa26805289944ec02d1ec884527234a1e508187542ec0868ae022394515c03b462a2600d28ca985a2ad1528ea44ec1691f48a0c7a209a446c0681cc1551e689c68ba38a1a50c7c06cc20068418d9109f913e8ffeb751fd1a562fa8d016612157ac3623831b88b5445b0680188f093eacab14342623ea3bd1dc93fc17398b161889475a31d133040c56a31113002229b62660d1885452a25b8d884a9a800be1dc8ae90925551058cf0778390cc58f6c321178aa50ca1042412888064c4319c51928e0c7f627a05786d473602116389e812201a06981800de2b50a942cc29a09f195e57c3ca2191dc8a644aa36718f311442e30c6cb8c6e3b21d80ec05a826e0860c801c87ac05c078059c3b907d07e829a14408000000)

### Proposed Solution:
Creating a primitive type called `Data` or something similar which accepts a url and options param and makes a fetch request. This would be included as a step in the [rendering process](https://react-pdf.org/rendering-process) after the "Fetching Assets" step. It would then render the child components, similar to the [dynamic content rendering](https://react-pdf.org/advanced#dynamic-content) in View / Text.
```
{data.id}}
/>
```

Additionally and possibly we could also nest the Data components in order to fetch data for sub-reports.
```

}
```

Thoughts?