# Query symbol from code - bug

**URL:** <https://forum.builder.io/t/query-symbol-from-code-bug/2450>\
**Category:** Technical Questions\
**Tags:** visual-editor, react, nextjs\
**Created:** [August 4, 2022, 1:57pm UTC](https://forum.builder.io/t/query-symbol-from-code-bug/2450 "2022-08-04T13:57:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [August 4, 2022, 1:57pm UTC](https://forum.builder.io/t/query-symbol-from-code-bug/2450/1 "2022-08-04T13:57:59Z")

</div>

As you know, when you would like to access a data from builder, by default the upper one is the returned one.

In my code I have 2 symbols:

```auto
<Container>
        <BuilderComponent
          model="symbol"
          data={localizedData(filteredData?.data, true)}
        />
        <BuilderComponent
          model="symbol"
          options={{ query: { id: 'dea1ff8b5458485b91c0eb55ab7cf189' } }}
          data={{
            leftData: leftData,
            rightData: rightData,
            locale: locale,
          }}
        />
</Container>

```

And this way I am passing the data to the symbol.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/0/0b21a48cce9ddc64d0238bb6771395beea1597a9.png)

This is the order in the editor. (The customer-story-promo is the bottom one in the code, where I query by id)

The issue is:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/b00e05dc300477c49856e41809fdb0e44b62971e.png)

The bottom one is not displaying correctly, but if I switch the order between the two data in the editor:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/f/ff139406fa65b47cad6c6373815c9ecf1b5ef1c7.png)

This way the bottom one correctly displayed.  
Why?

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/b775ad6ded0a21c9bd29e15989de83a53cfd558b.jpeg)

Looks like 2 same type of symbol on one page is buggy, if I delete any of these, works properly, but if both are there, something goes wrong  
Link to these 2 symbol:

> **[Builder.io: Drag and drop Visual CMS](https://builder.io/content/d0b1658f80c94928af1b96b4877ca9c9)**
>
> Build and optimize digital experiences for any tech stack, visually.

> **[Builder.io: Drag and drop Visual CMS](https://builder.io/content/d0b1658f80c94928af1b96b4877ca9c9)**
>
> Build and optimize digital experiences for any tech stack, visually.

_ **Here is the full code to try out yourself, this is very important, please let me know:** _

```auto
import React from 'react'
import { BuilderComponent, Builder, builder } from '@builder.io/react'
import { useRouter } from 'next/router'

export async function getStaticPaths() {
  const pages = await builder.getAll('barion-userstory-data', {
    options: { noTargeting: true },
    limit: 99999,
    omit: 'data.blocks',
  })

  const paths = pages.map((post) => ({
    params: { id: post.data.name },
  }))

  return {
    paths: paths,
    fallback: true,
  }
}

export async function getStaticProps({ params, locale }) {
  if (locale == 'default') {
    return {
      props: {
        article: null,
        navbar: null,
        footer: null,
        subfooter: null,
      },
      revalidate: 5,
    }
  }

  const filteredData =
    (await builder
      .get('barion-userstory-data', {
        query: {
          name: params.id,
        },
      })
      .toPromise()) || null

  let enumlocalization =
    (await builder
      .get('enum-type-localization', {
        options: {
          includeRefs: true,
          noTraverse: false,
          noTargeting: true,
          query: {
            name: 'data',
          },
        },
      })
      .promise()) || null

  const hero =
    (await builder
      .get('hero-data', {
        query: {
          id: '32f148657e2646be8562eb4e6ebfa190',
        },
      })
      .toPromise()) || null
  const leftData =
    (await builder
      .get('barion-userstory-data', {
        query: {
          id: 'bca70ed951ae400995c38d8622da2d18',
        },
      })
      .toPromise()) || null
  const rightData =
    (await builder
      .get('barion-userstory-data', {
        query: {
          id: 'e54dacffe24f4cfb823c471c4616c4a6',
        },
      })
      .toPromise()) || null

  console.log(leftData)
  console.log(rightData)

  return {
    props: {
      filteredData,
      enumlocalization: enumlocalization.data,
      hero,
      leftData,
      rightData,
    },
    revalidate: 5,
  }
}

const CustomerStoryDetail = ({
  filteredData,
  enumlocalization,
  hero,
  leftData,
  rightData,
}) => {
  const { locale } = useRouter()

  const localizedCountry = (enuma) => {
    return enumlocalization?.country.find((item) => item.key.type == enuma.type)
      ?.value?.[locale]
  }
  const localizedIndustry = (enuma) => {
    return enumlocalization?.industry.find(
      (item) => item.key.type == enuma.type
    )?.value?.[locale]
  }
  const localizedSolution = (enuma) => {
    return enumlocalization?.solution.find(
      (item) => item.key.type == enuma.type
    )?.value?.[locale]
  }

  const localizedData = (data, isDetail = false) => {
    return {
      backgroundImage: data?.backgroundImage,
      backgroundImageAltText: data?.backgroundImageAltText?.[locale],
      detail: {
        ...data?.detail,
        description: data?.detail?.description?.[locale],
        descriptionExplanation: data?.detail?.descriptionExplanation?.[locale],
        employees: data?.detail?.employees?.[locale],
        qa: data?.detail?.qa?.[locale],
      },
      industry: localizedIndustry(data?.industry),
      country: localizedCountry(data?.country),
      solution: data?.solution.map((sol) => localizedSolution(sol.solution)),
      logo: data?.logo,
      name: data?.name,
      threeGridList: data?.threeGridList?.[locale],
      threeGridName: data?.threeGridName?.[locale],
      title: data?.title?.[locale],
      isDetail: isDetail,
    }
  }

  return (
    <div style={{ marginTop: '110px', paddingBottom: '40px' }}>
        <BuilderComponent
          model="symbol"
          options={{ query: { id: 'd0b1658f80c94928af1b96b4877ca9c9' } }}
          data={localizedData(filteredData?.data, true)}
        />
        <BuilderComponent
          model="symbol"
          options={{ query: { id: 'dea1ff8b5458485b91c0eb55ab7cf189' } }}
          data={{
            leftData: leftData,
            rightData: rightData,
            locale: locale,
          }}
        />
        <BuilderComponent
          model="hero"
          data={{
            result: hero,
            locale: locale,
          }}
        />
    </div>
  )
}

export default CustomerStoryDetail

```

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [August 5, 2022, 7:08pm UTC](https://forum.builder.io/t/query-symbol-from-code-bug/2450/2 "2022-08-05T19:08:22Z")

</div>

Hey @radikris ! Great question! I plan to author a forum post on just this issue in the next few days, but in the meantime I have a quick fix for you.

Generally, we recommend models to have one `<BuilderComponent />` entry per page, as they should mostly be set up to address a single use case. Because of this, our SDK tries to optimize API calls when fetching content entries from the same model.

However, depending on your set up there are might be some cases where you might want different content entries from the same model. Symbols is a good example of this. There are a number of ways you could get around this SDK optimization, but the most straight forward is to pass a `key` value in the options prop so that the SDK can easily differentiate the calls being made (I passed the same ID, but it could really be anything). I have updated your code below, this should fix the issue, check it out and see if it works for you!

```auto
<Container>
        <BuilderComponent
          model="symbol"
          data={localizedData(filteredData?.data, true)}
        />
        <BuilderComponent
          model="symbol"
          options={{ key: 'dea1ff8b5458485b91c0eb55ab7cf189', query: { id: 'dea1ff8b5458485b91c0eb55ab7cf189' } }}
          data={{
            leftData: leftData,
            rightData: rightData,
            locale: locale,
          }}
        />
</Container>

```

---

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [August 7, 2022, 10:06pm UTC](https://forum.builder.io/t/query-symbol-from-code-bug/2450/3 "2022-08-07T22:06:28Z")

</div>

Hey Tim!

Thanks for the tip, now this is working, I have only 1 issue and can not make it happen:

> **[Builder.io: Drag and drop Visual CMS](https://builder.io/content/c9efded2557f441d928968649ed63997/edit?activeDesignerTab=5)**
>
> Build and optimize digital experiences for any tech stack, visually.

Here is the symbol I want to use in my code:

And here is how I try to render it:

```auto
<BuilderComponent
                  model="hero"
                  options={{
                    query: 'c9efded2557f441d928968649ed63997',

                    key: 'tophero',
                  }}
                  data={{
                    result: {
                      results: [tophero],
                    },
                    locale: locale,
                  }}
                />

```

where tophero is earlier fetched:

```auto
  let tophero =
    (await builder
      .get('hero-data', {
        query: {
          id: '7de8be4731ec4ea69e532adc4e23c095',
        },
      })
      .promise()) || null

```

But on the page the symbol:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/26a2e1b91f055bd4af3dde7716c1de1d83d6bc91.png)

So the data is there (I added the data.id to the paragraph above), but the builder block is no content, I guess something is wrong with the custom js code in the symbol, can you please check that out?

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [August 9, 2022, 8:55pm UTC](https://forum.builder.io/t/query-symbol-from-code-bug/2450/4 "2022-08-09T20:55:31Z")

</div>

I believe that question is the same thread as you have here: [BuilderComponent symbol data reference binding - #6 by TimG](https://forum.builder.io/t/buildercomponent-symbol-data-reference-binding/2449/6)

I have answered there so we can continue the conversation that thread. Thanks!