fix[gen1][core] ENG-7515 add query.id when hitting content API for symbols

.changeset/new-snails-impress.md

@@ -0,0 +1,6 @@
+---
+'@builder.io/react': patch
+'@builder.io/sdk': patch
+---
+
+Renders Symbol correctly when apiEndpoint is 'content'

.github/workflows/ci.yml

@@ -172,6 +172,9 @@ jobs:
           cache-node-modules: true
           cache-install-state: true
 
+      - name: Test Core
+        run: yarn g:nx test @builder.io/sdk
+
       - name: Build Core
         run: yarn g:nx build @builder.io/sdk
 

packages/core/src/builder.class.test.ts

@@ -768,4 +768,32 @@ describe('flushGetContentQueue', () => {
       { headers: { Authorization: `Bearer ${AUTH_TOKEN}` } }
     );
   });
+
+  test('hits content url with query.id when id is passed in options.query', async () => {
+    const expectedModel = 'symbol';
+    const expectedFormat = 'email';
+    const expectedEntryId = '123';
+
+    builder.apiEndpoint = 'content';
+    const result = await builder['flushGetContentQueue'](true, [
+      {
+        model: expectedModel,
+        format: expectedFormat,
+        key: expectedModel,
+        omit: OMIT,
+        fields: 'data',
+        limit: 10,
+        entry: expectedEntryId,
+        query: {
+          id: expectedEntryId,
+        },
+      },
+    ]);
+
+    expect(builder['makeFetchApiCall']).toBeCalledTimes(1);
+    expect(builder['makeFetchApiCall']).toBeCalledWith(
+      `https://cdn.builder.io/api/v3/content/${expectedModel}?omit=data.blocks&apiKey=${API_KEY}&fields=data&format=${expectedFormat}&userAttributes=%7B%22urlPath%22%3A%22%2F%22%2C%22host%22%3A%22localhost%22%2C%22device%22%3A%22desktop%22%7D&limit=10&model=%22${expectedModel}%22&entry=%22${expectedEntryId}%22&enrich=true&query.id=${expectedEntryId}`,
+      { headers: { Authorization: `Bearer ${AUTH_TOKEN}` } }
+    );
+  });
 });

packages/react-tests/nextjs/pages/[[...index]].tsx

@@ -43,6 +43,10 @@ export default function Page(props: PageProps & { apiVersion: any }) {
     builder.apiVersion = props?.apiVersion;
   }
 
+  if (props?.apiEndpoint) {
+    builder.apiEndpoint = props.apiEndpoint;
+  }
+
   // only enable tracking if we're not in the `/can-track-false` and `symbol-tracking` test route
   useEffect(() => {
     if (!router.asPath.includes('can-track-false') && !router.asPath.includes('symbol-tracking')) {
@@ -57,8 +61,6 @@ export default function Page(props: PageProps & { apiVersion: any }) {
         .promise()
         .then();
     } else if (router.asPath.includes('get-content')) {
-      builder.apiEndpoint = props.apiEndpoint;
-      delete props.apiEndpoint;
       builder
         .get('', {
           ...props,

packages/react-tests/react-remix/app/routes/($slug).tsx

@@ -44,15 +44,16 @@ export default function Page() {
     builder.apiVersion = props?.apiVersion;
   }
 
+  if (props?.apiEndpoint) {
+    builder.apiEndpoint = props.apiEndpoint;
+    delete props.apiEndpoint;
+  }
+
   useEffect(() => {
     if (
       window.location.pathname.includes('get-query') ||
       window.location.pathname.includes('get-content')
     ) {
-      if (props.apiEndpoint) {
-        builder.apiEndpoint = props.apiEndpoint;
-        delete props.apiEndpoint;
-      }
       builder
         .get('', {
           ...props,

packages/react-tests/react-vite/src/App.tsx

@@ -19,9 +19,8 @@ function App() {
         window.location.pathname.includes('get-query') ||
         window.location.pathname.includes('get-content')
       ) {
-        if (resp.apiEndpoint) {
+        if (resp?.apiEndpoint) {
           builder.apiEndpoint = resp.apiEndpoint;
-          delete resp.apiEndpoint;
         }
         builder
           .get('', {
@@ -38,6 +37,10 @@ function App() {
     builder.apiVersion = props?.apiVersion;
   }
 
+  if (props?.apiEndpoint) {
+    builder.apiEndpoint = props.apiEndpoint;
+  }
+
   if (props?.trustedHosts) {
     Builder.trustedHosts = props.trustedHosts;
   }

packages/react/src/blocks/Symbol.tsx

@@ -161,6 +161,12 @@ class SymbolComponent extends React.Component<PropsWithChildren<SymbolProps>> {
                       key: builderComponentKey,
                       noEditorUpdates: true,
                     }),
+                    ...(Builder.singletonInstance.apiEndpoint === 'content' &&
+                      entry && {
+                        query: {
+                          id: entry,
+                        },
+                      }),
                   }}
                   codegen={!!content?.data?.blocksJs}
                   hydrate={state.state?._hydrate}

packages/sdks-tests/src/e2e-tests/hit-content-api.spec.ts

@@ -1,5 +1,6 @@
 import { expect } from '@playwright/test';
 import { excludeGen1, test, mapSdkName, getSdkGeneration } from '../helpers/index.js';
+import { FIRST_SYMBOL_CONTENT, SECOND_SYMBOL_CONTENT } from '../specs/symbols.js';
 
 test.describe('Get Content', () => {
   test('call content API only once - in page', async ({ page, sdk }) => {
@@ -40,4 +41,41 @@ test.describe('Get Content', () => {
     expect(await req!.postDataJSON()).toEqual({ test: 'test' });
     expect(req!.method()).toBe('POST');
   });
+  test('fetch symbol with query.id', async ({ page, sdk }) => {
+    test.skip(!excludeGen1(sdk));
+
+    let x = 0;
+    let headers;
+
+    const urlMatch = /https:\/\/cdn\.builder\.io\/api\/v3\/content\/symbol/;
+
+    const urls: string[] = [];
+
+    await page.route(urlMatch, route => {
+      x++;
+      headers = route.request().headers();
+
+      const url = new URL(route.request().url());
+      urls.push(url.href);
+      return route.fulfill({
+        status: 200,
+        json: {
+          results: [x === 0 ? FIRST_SYMBOL_CONTENT : SECOND_SYMBOL_CONTENT],
+        },
+      });
+    });
+
+    await page.goto('/get-content-with-symbol', { waitUntil: 'networkidle' });
+
+    await expect(x).toBeGreaterThanOrEqual(2);
+
+    urls.forEach(url => {
+      expect(url).toContain('query.id=29ab534d62c4406c8500e1cbfa609537');
+    });
+
+    // Check for new SDK headers
+    expect(headers?.['x-builder-sdk']).toBe(mapSdkName(sdk));
+    expect(headers?.['x-builder-sdk-gen']).toBe(getSdkGeneration(sdk));
+    expect(headers?.['x-builder-sdk-version']).toMatch(/\d+\.\d+\.\d+/); // Check for semver format
+  });
 });

packages/sdks-tests/src/specs/index.ts

@@ -190,6 +190,7 @@ export const PAGES: Record<string, Page> = {
   '/symbol-with-jscode': { content: COUNTDOWN },
   '/get-content': { content: HTTP_REQUESTS, target: 'gen1' },
   '/get-query': { content: HTTP_REQUESTS, target: 'gen1' },
+  '/get-content-with-symbol': { content: CONTENT_WITHOUT_SYMBOLS, target: 'gen1' },
 } as const;
 
 export type Path = keyof typeof PAGES;
@@ -299,6 +300,7 @@ export const getProps = async (args: {
       };
       break;
     case '/get-content':
+    case '/get-content-with-symbol':
       extraProps = {
         apiEndpoint: 'content',
       };