Fix: React Gen1 SDK: Symbols rendering

.changeset/cool-pans-sing.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/react': major
+---
+
+Breaking Change: Use `/query` instead of `/content` for API calls. This change fixes a symbol rendering issue introduced in https://github.com/BuilderIO/builder/pull/3681, which was included in the 5.0.0 release.

.changeset/mild-pans-sing.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/sdk': major
+---
+
+Breaking Change: Use `/query` instead of `/content` for API calls. This change fixes a symbol rendering issue introduced in https://github.com/BuilderIO/builder/pull/3681, which was included in the 4.0.0 release.

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

@@ -505,7 +505,7 @@ describe('flushGetContentQueue', () => {
     );
   });
 
-  test("hits content url when format is 'html'", async () => {
+  test("hits query url when apiEndpoint is undefined and format is 'html'", async () => {
     const expectedFormat = 'html';
 
     const result = await builder['flushGetContentQueue'](true, [
@@ -516,6 +516,35 @@ describe('flushGetContentQueue', () => {
         userAttributes: { respectScheduling: true },
         omit: OMIT,
         fields: 'data',
+      },
+    ]);
+
+    const observerNextMock = builder.observersByKey[MODEL]?.next as jest.Mock;
+
+    expect(observerNextMock).toBeCalledTimes(1);
+    expect(observerNextMock.mock.calls[0][0][0]).toStrictEqual({
+      ...codegenOrQueryApiResult[MODEL][0],
+      variationId: expect.any(String),
+    });
+    expect(builder['makeFetchApiCall']).toBeCalledTimes(1);
+    expect(builder['makeFetchApiCall']).toBeCalledWith(
+      `https://cdn.builder.io/api/v3/query/${API_KEY}/${MODEL}?omit=${OMIT}&apiKey=${API_KEY}&fields=data&format=${expectedFormat}&userAttributes=%7B%22respectScheduling%22%3Atrue%7D&options.${MODEL}.model=%22${MODEL}%22`,
+      { headers: { Authorization: `Bearer ${AUTH_TOKEN}` } }
+    );
+  });
+
+  test("hits content url when apiEndpoint is 'content' and format is 'html'", async () => {
+    const expectedFormat = 'html';
+
+    const result = await builder['flushGetContentQueue'](true, [
+      {
+        apiEndpoint: 'content',
+        model: MODEL,
+        format: expectedFormat,
+        key: MODEL,
+        userAttributes: { respectScheduling: true },
+        omit: OMIT,
+        fields: 'data',
         limit: 10,
       },
     ]);
@@ -542,7 +571,7 @@ describe('flushGetContentQueue', () => {
     );
   });
 
-  test("hits content url when format is 'amp'", async () => {
+  test("hits query url when apiEndpoint is undefined and format is 'amp'", async () => {
     const expectedFormat = 'amp';
 
     const result = await builder['flushGetContentQueue'](true, [
@@ -553,6 +582,35 @@ describe('flushGetContentQueue', () => {
         userAttributes: { respectScheduling: true },
         omit: OMIT,
         fields: 'data',
+      },
+    ]);
+
+    const observerNextMock = builder.observersByKey[MODEL]?.next as jest.Mock;
+
+    expect(observerNextMock).toBeCalledTimes(1);
+    expect(observerNextMock.mock.calls[0][0][0]).toStrictEqual({
+      ...codegenOrQueryApiResult[MODEL][0],
+      variationId: expect.any(String),
+    });
+    expect(builder['makeFetchApiCall']).toBeCalledTimes(1);
+    expect(builder['makeFetchApiCall']).toBeCalledWith(
+      `https://cdn.builder.io/api/v3/query/${API_KEY}/${MODEL}?omit=${OMIT}&apiKey=${API_KEY}&fields=data&format=${expectedFormat}&userAttributes=%7B%22respectScheduling%22%3Atrue%7D&options.${MODEL}.model=%22${MODEL}%22`,
+      { headers: { Authorization: `Bearer ${AUTH_TOKEN}` } }
+    );
+  });
+
+  test("hits content url when apiEndpoint is 'content' and format is 'amp'", async () => {
+    const expectedFormat = 'amp';
+
+    const result = await builder['flushGetContentQueue'](true, [
+      {
+        apiEndpoint: 'content',
+        model: MODEL,
+        format: expectedFormat,
+        key: MODEL,
+        userAttributes: { respectScheduling: true },
+        omit: OMIT,
+        fields: 'data',
         limit: 10,
       },
     ]);
@@ -579,7 +637,7 @@ describe('flushGetContentQueue', () => {
     );
   });
 
-  test("hits content url when format is 'email'", async () => {
+  test("hits query url when apiEndpoint is undefined and format is 'email'", async () => {
     const expectedFormat = 'email';
 
     const result = await builder['flushGetContentQueue'](true, [
@@ -590,6 +648,63 @@ describe('flushGetContentQueue', () => {
         userAttributes: { respectScheduling: true },
         omit: OMIT,
         fields: 'data',
+      },
+    ]);
+
+    const observerNextMock = builder.observersByKey[MODEL]?.next as jest.Mock;
+
+    expect(observerNextMock).toBeCalledTimes(1);
+    expect(observerNextMock.mock.calls[0][0][0]).toStrictEqual({
+      ...codegenOrQueryApiResult[MODEL][0],
+      variationId: expect.any(String),
+    });
+    expect(builder['makeFetchApiCall']).toBeCalledTimes(1);
+    expect(builder['makeFetchApiCall']).toBeCalledWith(
+      `https://cdn.builder.io/api/v3/query/${API_KEY}/${MODEL}?omit=${OMIT}&apiKey=${API_KEY}&fields=data&format=${expectedFormat}&userAttributes=%7B%22respectScheduling%22%3Atrue%7D&options.${MODEL}.model=%22${MODEL}%22`,
+      { headers: { Authorization: `Bearer ${AUTH_TOKEN}` } }
+    );
+  });
+
+  test("hits query url when apiEndpoint is undefined and format is 'email' and url is passed instead of userAttributes", async () => {
+    const expectedFormat = 'email';
+
+    const result = await builder['flushGetContentQueue'](true, [
+      {
+        model: MODEL,
+        format: expectedFormat,
+        key: MODEL,
+        url: '/test-page',
+        omit: OMIT,
+        fields: 'data',
+      },
+    ]);
+
+    const observerNextMock = builder.observersByKey[MODEL]?.next as jest.Mock;
+
+    expect(observerNextMock).toBeCalledTimes(1);
+    expect(observerNextMock.mock.calls[0][0][0]).toStrictEqual({
+      ...codegenOrQueryApiResult[MODEL][0],
+      variationId: expect.any(String),
+    });
+    expect(builder['makeFetchApiCall']).toBeCalledTimes(1);
+    expect(builder['makeFetchApiCall']).toBeCalledWith(
+      `https://cdn.builder.io/api/v3/query/${API_KEY}/${MODEL}?omit=${OMIT}&apiKey=${API_KEY}&fields=data&format=${expectedFormat}&userAttributes=%7B%22urlPath%22%3A%22%2Ftest-page%22%2C%22host%22%3A%22localhost%22%2C%22device%22%3A%22desktop%22%7D&options.${MODEL}.model=%22${MODEL}%22`,
+      { headers: { Authorization: `Bearer ${AUTH_TOKEN}` } }
+    );
+  });
+
+  test("hits content url when apiEndpoint is 'content' and format is 'email'", async () => {
+    const expectedFormat = 'email';
+
+    const result = await builder['flushGetContentQueue'](true, [
+      {
+        apiEndpoint: 'content',
+        model: MODEL,
+        format: expectedFormat,
+        key: MODEL,
+        userAttributes: { respectScheduling: true },
+        omit: OMIT,
+        fields: 'data',
         limit: 10,
       },
     ]);
@@ -615,4 +730,42 @@ describe('flushGetContentQueue', () => {
       { headers: { Authorization: `Bearer ${AUTH_TOKEN}` } }
     );
   });
+
+  test("hits content url when apiEndpoint is 'content' and format is 'email' and url is passed instead of userAttributes", async () => {
+    const expectedFormat = 'email';
+
+    const result = await builder['flushGetContentQueue'](true, [
+      {
+        apiEndpoint: 'content',
+        model: MODEL,
+        format: expectedFormat,
+        key: MODEL,
+        url: '/test-page',
+        omit: OMIT,
+        fields: 'data',
+        limit: 10,
+      },
+    ]);
+
+    const observerNextMock = builder.observersByKey[MODEL]?.next as jest.Mock;
+
+    expect(observerNextMock).toBeCalledTimes(1);
+    expect(observerNextMock.mock.calls[0][0][0]).toStrictEqual({
+      ...contentApiResult.results[0],
+      variationId: expect.any(String),
+    });
+    expect(observerNextMock.mock.calls[0][0][1]).toStrictEqual({
+      ...contentApiResult.results[1],
+    });
+    expect(observerNextMock.mock.calls[0][0][2]).toStrictEqual({
+      ...contentApiResult.results[2],
+      variationId: expect.any(String),
+    });
+
+    expect(builder['makeFetchApiCall']).toBeCalledTimes(1);
+    expect(builder['makeFetchApiCall']).toBeCalledWith(
+      `https://cdn.builder.io/api/v3/content/${MODEL}?omit=data.blocks&apiKey=${API_KEY}&fields=data&format=${expectedFormat}&userAttributes=%7B%22urlPath%22%3A%22%2Ftest-page%22%2C%22host%22%3A%22localhost%22%2C%22device%22%3A%22desktop%22%7D&limit=10&model=%22${MODEL}%22&enrich=true`,
+      { headers: { Authorization: `Bearer ${AUTH_TOKEN}` } }
+    );
+  });
 });

packages/core/src/builder.class.ts

@@ -275,6 +275,12 @@ type AllowEnrich =
   | { apiVersion?: never; enrich?: boolean };
 
 export type GetContentOptions = AllowEnrich & {
+  /**
+   * Dictates which API endpoint is used when fetching content. Allows `'content'` and `'query'`.
+   * Defaults to `'query'`.
+   */
+  apiEndpoint?: 'content' | 'query';
+
   /**
    * Optional fetch options to be passed as the second argument to the `fetch` function.
    */
@@ -2454,6 +2460,8 @@ export class Builder {
 
     const queue = useQueue || (usePastQueue ? this.priorContentQueue : this.getContentQueue) || [];
 
+    const apiEndpoint = queue[0].apiEndpoint || 'query';
+
     // TODO: do this on every request send?
     this.getOverridesFromQueryString();
 
@@ -2547,9 +2555,6 @@ export class Builder {
       }
     }
 
-    const isApiCallForCodegen =
-      queue[0].options?.format === 'solid' || queue[0].options?.format === 'react';
-
     for (const options of queue) {
       const format = options.format;
 
@@ -2588,7 +2593,7 @@ export class Builder {
       for (const key of properties) {
         const value = options[key];
         if (value !== undefined) {
-          if (isApiCallForCodegen) {
+          if (apiEndpoint === 'query') {
             queryParams.options = queryParams.options || {};
             queryParams.options[options.key!] = queryParams.options[options.key!] || {};
             queryParams.options[options.key!][key] = JSON.stringify(value);
@@ -2614,8 +2619,10 @@ export class Builder {
     }
 
     const format = queryParams.format;
+    const isApiCallForCodegen = format === 'solid' || format === 'react';
+    const isApiCallForCodegenOrQuery = isApiCallForCodegen || apiEndpoint === 'query';
 
-    if (!isApiCallForCodegen) {
+    if (apiEndpoint === 'content') {
       queryParams.enrich = true;
       if (queue[0].query) {
         const flattened = this.flattenMongoQuery({ query: queue[0].query });
@@ -2639,6 +2646,8 @@ export class Builder {
     let url;
     if (isApiCallForCodegen) {
       url = `${host}/api/v1/codegen/${this.apiKey}/${keyNames}`;
+    } else if (apiEndpoint === 'query') {
+      url = `${host}/api/v3/query/${this.apiKey}/${keyNames}`;
     } else {
       url = `${host}/api/v3/content/${queue[0].model}`;
     }
@@ -2664,7 +2673,7 @@ export class Builder {
             if (!observer) {
               return;
             }
-            const data = isApiCallForCodegen ? result[keyName] : result.results;
+            const data = isApiCallForCodegenOrQuery ? result[keyName] : result.results;
             const sorted = data; // sortBy(data, item => item.priority);
             if (data) {
               const testModifiedResults = Builder.isServer

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

@@ -20,7 +20,7 @@ test.describe('Get Content', () => {
     });
 
     await page.goto('/get-content', { waitUntil: 'networkidle' });
-    expect(contentApiInvocations).toBeGreaterThan(0);
+    expect(contentApiInvocations).toBe(1);
 
     // Check for new SDK headers
     expect(headers?.['x-builder-sdk']).toBe(mapSdkName(sdk));
@@ -30,7 +30,7 @@ test.describe('Get Content', () => {
   test('passes fetch options', async ({ page, packageName }) => {
     test.skip(packageName !== 'gen1-next');
 
-    const urlMatch = /https:\/\/cdn\.builder\.io\/api\/v3\/content/;
+    const urlMatch = /https:\/\/cdn\.builder\.io\/api\/v3\/query/;
     const responsePromise = page.waitForResponse(urlMatch);
 
     await page.goto('/with-fetch-options', { waitUntil: 'networkidle' });

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

@@ -0,0 +1,23 @@
+import { expect } from '@playwright/test';
+import { excludeGen1, test } from '../helpers/index.js';
+
+test.describe('Get Query', () => {
+  test('call query API only once - in page', async ({ page, sdk }) => {
+    test.skip(!excludeGen1(sdk));
+
+    const urlMatch = /https:\/\/cdn\.builder\.io\/api\/v3\/query/;
+
+    let queryApiInvocations = 0;
+
+    await page.route(urlMatch, route => {
+      queryApiInvocations++;
+      return route.fulfill({
+        status: 200,
+        json: {},
+      });
+    });
+
+    await page.goto('/get-query', { waitUntil: 'networkidle' });
+    expect(queryApiInvocations).toBe(1);
+  });
+});

packages/sdks-tests/src/e2e-tests/slot.spec.ts

@@ -31,7 +31,7 @@ test.describe('Slot', () => {
     await expect(page.locator('text=This is called recursion!')).toBeVisible();
   });
 
-  test('slot should render with symbol (without content)', async ({ page, packageName }) => {
+  test('slot should render with symbol (without content)', async ({ page, packageName, sdk }) => {
     // gen1-remix and gen1-next skipped because React.useContext is not recognized
     // ssr packages skipped because it fetches the slot content from the server
     test.fail(
@@ -40,15 +40,23 @@ test.describe('Slot', () => {
 
     let x = 0;
 
-    const urlMatch = /https:\/\/cdn\.builder\.io\/api\/v3\/content\/symbol\.*/;
+    const urlMatch =
+      sdk === 'oldReact'
+        ? 'https://cdn.builder.io/api/v3/query/abcd/symbol*'
+        : /https:\/\/cdn\.builder\.io\/api\/v3\/content\/symbol\.*/;
 
     await page.route(urlMatch, route => {
       x++;
 
+      const url = new URL(route.request().url());
+
+      const keyName =
+        sdk === 'oldReact' ? decodeURIComponent(url.pathname).split('/').reverse()[0] : 'results';
+
       return route.fulfill({
         status: 200,
         json: {
-          results: [x === 0 ? FIRST_SYMBOL_CONTENT : SECOND_SYMBOL_CONTENT],
+          [keyName]: [x === 0 ? FIRST_SYMBOL_CONTENT : SECOND_SYMBOL_CONTENT],
         },
       });
     });