fix[gen1][core]: ENG-9774 properly handle query when $-mongo-operator is present for content API (BuilderIO#4102)

## Description

`query` with `$or` is not part of Content API when we use
`builder.get()` but Query API includes `query` with `$or`
It works on Gen-2 SDK which also uses Content API

**JIRA Ticket**
https://builder-io.atlassian.net/browse/ENG-9774

**Steps to test**
1. Clone repo https://github.com/BuilderIO/oncall-repro-cases.
2. Run `cd eng-9774-gen1-vite-app`.
3. change the `package.json` to `link://` the `@builder.io/react` and
`@builder.io/sdk` dependencies to this branch.
4. Run `yarn`.
5. Run `yarn dev`.

**Loom**
https://www.loom.com/share/051b8af3d9344c218d678a20d28b0fc4

---------

Co-authored-by: Clyde Mendonca <[email protected]>

Author: clyde-builderio

.changeset/silent-wombats-drum.md

@@ -0,0 +1,6 @@
+---
+"@builder.io/sdk": patch
+"@builder.io/react": patch
+---
+
+Fix: Corrected the conversion of query-objects with $-mongo-operators which are passed to builder.get() with apiEndpoint is "content"

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

@@ -1017,7 +1017,112 @@ describe('flushGetContentQueue', () => {
 
     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&includeRefs=true&limit=10&model=%22${expectedModel}%22&entry=%22${expectedEntryId}%22&query.id=${expectedEntryId}`,
+      `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&includeRefs=true&limit=10&model=%22${expectedModel}%22&entry=%22123%22&query.id=%22${expectedEntryId}%22`,
+      { headers: { Authorization: `Bearer ${AUTH_TOKEN}` } }
+    );
+  });
+
+  test('hits content url with query as the same object as the one passed in options.query if query contains $ mongo-operator', 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: {
+          data: {
+            id: '123',
+          },
+          $or: [
+            {
+              data: {
+                sourceUrl: '/c/docs/develop',
+              },
+            },
+            {
+              data: {
+                sourceUrl: 'https://www.builder.io' + '/c/docs/develop',
+              },
+            },
+          ],
+        },
+      },
+    ]);
+
+    expect(builder['makeFetchApiCall']).toBeCalledTimes(1);
+    expect(builder['makeFetchApiCall']).toBeCalledWith(
+      `https://cdn.builder.io/api/v3/content/symbol?omit=data.blocks&apiKey=25608a566fbb654ea959c1b1729e370d&fields=data&format=email&userAttributes=%7B%22urlPath%22%3A%22%2F%22%2C%22host%22%3A%22localhost%22%2C%22device%22%3A%22desktop%22%7D&includeRefs=true&limit=10&model=%22symbol%22&entry=%22123%22&query=%7B%22data%22%3A%7B%22id%22%3A%22123%22%7D%2C%22%24or%22%3A%5B%7B%22data%22%3A%7B%22sourceUrl%22%3A%22%2Fc%2Fdocs%2Fdevelop%22%7D%7D%2C%7B%22data%22%3A%7B%22sourceUrl%22%3A%22https%3A%2F%2Fwww.builder.io%2Fc%2Fdocs%2Fdevelop%22%7D%7D%5D%7D`,
+      { headers: { Authorization: `Bearer ${AUTH_TOKEN}` } }
+    );
+  });
+
+  test('hits content url with query as the same object as the one passed in options.query if query contains nested $ mongo-operator', 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: {
+          data: {
+            sourceUrl: { $eq: '/c/docs/develop' },
+          },
+        },
+      },
+    ]);
+
+    expect(builder['makeFetchApiCall']).toBeCalledTimes(1);
+    expect(builder['makeFetchApiCall']).toBeCalledWith(
+      `https://cdn.builder.io/api/v3/content/symbol?omit=data.blocks&apiKey=25608a566fbb654ea959c1b1729e370d&fields=data&format=email&userAttributes=%7B%22urlPath%22%3A%22%2F%22%2C%22host%22%3A%22localhost%22%2C%22device%22%3A%22desktop%22%7D&includeRefs=true&limit=10&model=%22symbol%22&entry=%22123%22&query.data.sourceUrl=%7B%22%24eq%22%3A%22%2Fc%2Fdocs%2Fdevelop%22%7D`,
+      { headers: { Authorization: `Bearer ${AUTH_TOKEN}` } }
+    );
+  });
+
+  test('hits content url with query as the flattened object as the one passed in options.query if query does not contain $ mongo-operator', 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: {
+          data: {
+            sourceUrl: '/c/docs/develop',
+          },
+          name: {
+            fullName: 'John Doe',
+          },
+        },
+      },
+    ]);
+
+    expect(builder['makeFetchApiCall']).toBeCalledTimes(1);
+    expect(builder['makeFetchApiCall']).toBeCalledWith(
+      `https://cdn.builder.io/api/v3/content/symbol?omit=data.blocks&apiKey=25608a566fbb654ea959c1b1729e370d&fields=data&format=email&userAttributes=%7B%22urlPath%22%3A%22%2F%22%2C%22host%22%3A%22localhost%22%2C%22device%22%3A%22desktop%22%7D&includeRefs=true&limit=10&model=%22symbol%22&entry=%22123%22&query.data.sourceUrl=%22%2Fc%2Fdocs%2Fdevelop%22&query.name.fullName=%22John%20Doe%22`,
       { headers: { Authorization: `Bearer ${AUTH_TOKEN}` } }
     );
   });

packages/core/src/builder.class.ts

@@ -2502,6 +2502,13 @@ export class Builder {
     return getFetch()(url, this.addSdkHeaders(requestOptions));
   }
 
+  /**
+   * Flatten a nested MongoDB query object into a flat object with dot-separated keys.
+   * $ keys are not flattened and are left as is.
+   *
+   * { foo: { bar: { $gt: 5 }}} -> { 'foo.bar': { '$gt': 5 }}
+   * { foo: {'bar.id': { $elemMatch: { 'baz.id': { $in: ['abc', 'bcd'] }}}}} -> { 'foo.bar.id': { '$elemMatch': { 'baz.id': { '$in': ['abc', 'bcd'] }}}}
+   */
   private flattenMongoQuery(obj: any, _current?: any, _res: any = {}): { [key: string]: string } {
     for (const key in obj) {
       const value = obj[key];
@@ -2709,11 +2716,12 @@ export class Builder {
 
     if (this.apiEndpoint === 'content') {
       if (queue[0].query) {
-        const flattened = this.flattenMongoQuery({ query: queue[0].query });
+        delete queryParams.query;
+        const objectToFlatten = { query: queue[0].query };
+        const flattened = this.flattenMongoQuery(objectToFlatten);
         for (const key in flattened) {
-          queryParams[key] = flattened[key];
+          queryParams[key] = JSON.stringify(flattened[key]);
         }
-        delete queryParams.query;
       }
     }
 

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

@@ -71,7 +71,8 @@ test.describe('Get Content', () => {
     await expect(x).toBeGreaterThanOrEqual(2);
 
     urls.forEach(url => {
-      expect(url).toContain('query.id=29ab534d62c4406c8500e1cbfa609537');
+      const urlParams = new URL(url).searchParams;
+      expect(urlParams.get('query.id')).toBe(`"29ab534d62c4406c8500e1cbfa609537"`);
     });
 
     // Check for new SDK headers