# Reference object empty in preview **URL:** \ **Category:** Technical Questions\ **Tags:** visual-editor, nextjs, symbols\ **Created:** [July 11, 2023, 4:45pm UTC](https://forum.builder.io/t/reference-object-empty-in-preview/3875 "2023-07-11T16:45:59Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![jjablonski](https://avatars.discourse-cdn.com/v4/letter/j/e19b73/32.png) [@jjablonski](https://forum.builder.io/u/jjablonski)\ **Post date:** [July 11, 2023, 4:45pm UTC](https://forum.builder.io/t/reference-object-empty-in-preview/3875/1 "2023-07-11T16:45:59Z")
Hi I have a problem with a reference not including value in the visual editor. When I open the page im draft preview the reference is populated correctly. **Visual editor console:** ```auto { "@type": "@builder.io/core:Reference", "id": "fc2bbeb07092495b8ea7f1a49a705096", "model": "category" // "value" key missing } ``` **Draft preview console:** ```auto { "@type": "@builder.io/core:Reference", "id": "fc2bbeb07092495b8ea7f1a49a705096", "model": "category", "value": { "data": { "title": "Article" }, } // More props... } ``` This is the component schema: ```auto Builder.registerComponent(LazyContentDisplay, { name: "ContentDisplay", inputs: [ { name: "items", type: "list", subFields: [ { name: "categories", type: "list", subFields: [ { name: "category", type: "reference", model: "category", }, ], }, // More fields ... ], }, // I tried the top level reference field, but it also doesn't work // { // name: "test", // type: "reference", // model: "category", // }, ], }) ``` Basically I want to have a list of all categories used by items and because of this issue it’s working only in the app but not in **visual editor**. I know I can fetch all the categories and map them to ids but I wonder if there’s a cleaner way to do it. Is there a way to make it work? ---
**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\ **Post date:** [July 11, 2023, 5:15pm UTC](https://forum.builder.io/t/reference-object-empty-in-preview/3875/2 "2023-07-11T17:15:55Z")
Hello @jjablonski, You may find help at the below forum post > [@Builder not passing reference value while in the visual editor](https://forum.builder.io/t/builder-not-passing-reference-value-while-in-the-visual-editor/3796): > > Hi there, I have a bug with the custom component here on easyplant. Builder content link With this preview URL: Builder public api key b701a8b1c4d744048ad10c35760795f4 What are you trying to accomplish I’ve created a custom component “BlogRelatedArticles”. It has an input named “articles” which is a list of references to the “blog-article” model. So, in my component I use props to get that “articles” array and get actual articles from there. It works perfectly fine when I’m on the websit… ---
**Author:** ![jjablonski](https://avatars.discourse-cdn.com/v4/letter/j/e19b73/32.png) [@jjablonski](https://forum.builder.io/u/jjablonski)\ **Post date:** [July 11, 2023, 9:16pm UTC](https://forum.builder.io/t/reference-object-empty-in-preview/3875/3 "2023-07-11T21:16:37Z")
Thanks for the reply. Looks very similar but I think it differs a bit. In my case the **category** is a **data model** and I’m not using **BuilderComponent** to display it. `includeRefs` sounds like a property I’m looking for but I would expect something more like this: ```auto subFields: [ { name: "category", type: "reference", model: "category", // 👇 This is just an example options: { includeRefs: true, }, }, ], ``` … so component’s props are already populated with the reference data. Can I add this `includeRefs` prop somewhere else then **BuilderComponent**? ---
**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\ **Post date:** [July 12, 2023, 10:56am UTC](https://forum.builder.io/t/reference-object-empty-in-preview/3875/4 "2023-07-12T10:56:22Z")
Hi @jjablonski, Currently, you can’t pass `includeRefs: true` from the custom components, either you will have to pass it with **BuilderComponent** or fetch the required data within the custom component as shown in the below forum post > [@How to get CMS data model data for a Custom Register component?](https://forum.builder.io/t/how-to-get-cms-data-model-data-for-a-custom-register-component/2914): > > Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank. Builder content link What are you trying to accomplish I have created a custom component ConnectorsBlock and add it in a [Page](https://builder.io/content/a0b91a23e9db4b678762518d728ff18e). For this custom component, I want to fetch data that also lives in Builder in a CMS data model called [Connector Item](https://builder.io/content?model=e90b44d3a38d4e6783113bb686ead5ba). I was trying to use getAsyncProps to get connectors info in t… ---
**Author:** ![jjablonski](https://avatars.discourse-cdn.com/v4/letter/j/e19b73/32.png) [@jjablonski](https://forum.builder.io/u/jjablonski)\ **Post date:** [July 12, 2023, 4:26pm UTC](https://forum.builder.io/t/reference-object-empty-in-preview/3875/5 "2023-07-12T16:26:37Z")
How come it works in the app then? On the web application the props come with the `value` object right away. Fetching it separately and combine the data using the IDs sounds like an overkill to ONLY make it work in the visual editor. I just noticed that refreshing a visual editor view **renders the fetched categories correctly** for a brief second and **then they disappear**. I checked the logs and in fact there is `value` fetched correctly and then the page refreshes and loses the `value` field. ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d55b0bdafed7520fe466a2b1a5dd9ac68ea6dc19.png) This looks like bug ---
**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\ **Post date:** [July 13, 2023, 2:44pm UTC](https://forum.builder.io/t/reference-object-empty-in-preview/3875/6 "2023-07-13T14:44:42Z")
Hello @jjablonski, Our app uses query API which is a little different than the content API used on the client side, if you could please share the builder content link where we can reproduce this issue would be much appreciated. Thank you~ ---
**Author:** ![jjablonski](https://avatars.discourse-cdn.com/v4/letter/j/e19b73/32.png) [@jjablonski](https://forum.builder.io/u/jjablonski)\ **Post date:** [July 14, 2023, 8:50am UTC](https://forum.builder.io/t/reference-object-empty-in-preview/3875/7 "2023-07-14T08:50:18Z")
Hi, sure. Here’s the link [Builder.io: Drag & Drop Headless CMS](https://builder.io/content/1c3f080a50744550a36f4b2f74c9851d) Let me know if I can provide anything more to help you solve this issue, thanks ---
**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\ **Post date:** [July 14, 2023, 12:30pm UTC](https://forum.builder.io/t/reference-object-empty-in-preview/3875/8 "2023-07-14T12:30:59Z")
Hello @jjablonski, We are not able to reproduce the issue, passing `options={{ includeRefs: true }}` with the BuilderComponent seems to work for us, `` For reference, I’ve recorded a loom that you can refer to ---
**Author:** ![jjablonski](https://avatars.discourse-cdn.com/v4/letter/j/e19b73/32.png) [@jjablonski](https://forum.builder.io/u/jjablonski)\ **Post date:** [July 17, 2023, 9:43pm UTC](https://forum.builder.io/t/reference-object-empty-in-preview/3875/9 "2023-07-17T21:43:05Z")
Hi, thank you for taking your time to provide this answer. It is indeed working as expected now; I was just looking one level too deep, completely forgetting that I was rendering the whole page that had the component from BuilderPage. After adding `includeRef` to the BuilderPage, it works fine in the visual editor as well. One last question regarding this topic - `includeRefs` is marked as deprecated now: > @deprecated — use enrich instead Yet, `enrich: true` doesn’t seem to work the same way. Is there a documentation somewhere of this property, or is it still work in progress? (I’m running `@builder.io/react` version 3.0.7) ---
**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\ **Post date:** [July 18, 2023, 1:26pm UTC](https://forum.builder.io/t/reference-object-empty-in-preview/3875/10 "2023-07-18T13:26:27Z")
Hello @jjablonski, We still want to support `includeRefs` and `noTraverse` (aka be backwards compatible), but we will update docs to focus on this new simpler query param `enrich ` to avoid any confusion. ---
**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\ **Post date:** [August 6, 2024, 9:14am UTC](https://forum.builder.io/t/reference-object-empty-in-preview/3875/12 "2024-08-06T09:14:06Z")
Hi all, To include reference field values in the response and make them available in the editor for use, you will need to use the “ **enrich: true** ” option. Add the “ **enrich: true** ” option to the **builder.getAll** call and **BuilderComponent**. For example: ```auto const pages = await builder.getAll('page', { // to fetch references and Symbols options: { enrich: true } }); ``` ```auto ``` To know more, you can refer to the following documentation link [Fetching References and Symbols with enrich](https://www.builder.io/c/docs/enrich#fetching-references-and-symbols-with-enrich)