Manually download entries and assets into the SDK memory

1
function MyComponent({ entryOfTypeLink }){
2
   // Studio guarantees that it can load up to "level-3"
3
   // entity passed as prop is "level-2" 
4
   // NOTE: level-1 is only visible in Studio binding panel UI, 
5
   //       and is not passed to component.
6
7
   // To make references available you will need to resolve them using
8
   // inMemoryEntities.maybeResolveLink() utility function 
9
   // as shown in documentation. We skip this step here.
10
   // ... resolve referenced entities recursively ... 
11
   
12
   const entity = entityOfTypeLink; // L2
13
   const title = entryOfTypeLink?.fields?.title  // field on L2 entry
14
   const image = entryOfTypeLink?.fields?.image; // L3 asset
15
   const imageUrl = image.fields?.file?.url;  // field on L3 asset
16
   const relevantItem = entryOfTypeLink?.fields?.someRelevantItem; // L3 entry
17
   const relevantItemTitle = relevantItem?.fields.title; // field on L3 entry
18
   
19
   // this level of nesting is already beyond "level-3" and 
20
   // is NOT automatically loaded by the Studio and Studio SDK
21
   // NOTE: field on L3 entry points to L4 entry!
22
   const relevantItemNextLevel = relevantItem.fields.someRelevantItem; 
23
}

1
import Experience from '../../../components/Experience';
2
import { getExperience } from '../../../utils/getExperience';
3
import { detachExperienceStyles } from '@contentful/experiences-sdk-react';
4
import '../../studio-config';
5
6
type Page = {
7
  params: { locale?: string; slug?: string; preview?: string };
8
  searchParams: { [key: string]: string | string[] | undefined };
9
};
10
11
export default async function ExperiencePage({ params, searchParams }: Page) {
12
  const { locale = 'en-US', slug = 'home-page' } = params || {};
13
  const { isPreview, expEditorMode, mode } = searchParams;
14
  const preview = isPreview === 'true' || mode === 'preview';
15
  const editorMode = expEditorMode === 'true';
16
  const { experience, error } = await getExperience(slug, locale, preview, editorMode);
17
18
  const client = createClientWithConfig(preview);
19
20
  if (error) {
21
    return <div>{error.message}</div>;
22
  }
23
24
  const stylesheet = experience ? detachExperienceStyles(experience) : null;
25
26
  // experience currently needs to be stringified manually to be passed to the component
27
  const experienceJSON = experience ? JSON.stringify(experience) : null;
28
29
  return (
30
    <main style=&#123;&#123; width: '100%' &#125;&#125;>
31
      {stylesheet && <style data-css-ssr>{`{stylesheet}`}</style>}
32
      <Experience experienceJSON={experienceJSON} locale={locale} debug={true} />
33
    </main>
34
  );
35
}

1
import type { Experience } from '@contentful/experiences-sdk-react';
2
import type { ContentfulClientApi, Asset, Entry } from 'contentful';
3
import { inMemoryEntities } from '@contentful/experiences-sdk-react';
4
import {
5
  extractReferencesFromEntriesAsIds,
6
  extractLeafLinksReferencedFromExperience,
7
} from '@contentful/experiences-core';
8
9
type EntitiesToFetch = {
10
  assetsToFetch: string[];
11
  entriesToFetch: string[];
12
};
13
14
export const fetchAdditionalLevels = async (
15
  depth: number,
16
  experience: Experience,
17
  localeCode: string,
18
  client: ContentfulClientApi<undefined>,
19
) => {
20
  // As first step we extract reference to L4 entities and kick off recursive fetching
21
22
  const addToMemory = (entities: Array<Entry | Asset>) => {
23
    // This function is a placeholder for whatever in-memory storage you are using
24
    // to store fetched entities. It should add the entity to your in-memory cache.
25
    // For example, if you are using a custom in-memory store, you might do:
26
    // inMemoryEntities.addEntity(entity);
27
    // For this example, we will just log the entity.
28
    if (entities.length === 0) {
29
      return;
30
    }
31
    inMemoryEntities.addEntities(entities);
32
  };
33
34
  const { assetIds, entryIds } = extractLeafLinksReferencedFromExperience(experience);
35
36
  await fetchLevel(depth, { assetsToFetch: assetIds, entriesToFetch: entryIds });
37
38
  async function fetchLevel(depth: number, { assetsToFetch, entriesToFetch }: EntitiesToFetch) {
39
    if (depth <= 0) {
40
      return;
41
    }
42
43
    const assetItems = await (async () => {
44
      if (assetsToFetch.length === 0) {
45
        return [];
46
      }
47
      
48
      const { items: assetItems } = await client.getAssets({
49
        'sys.id[in]': assetsToFetch,
50
        locale: localeCode,
51
        limit: 1000,
52
        skip: 0,
53
      });
54
      return assetItems;
55
    })();
56
57
    const entryItems = await (async () => {
58
      if (entriesToFetch.length === 0) {
59
        return [];
60
      }
61
      // Important that we should fetch Entries WITHOUT link resolution,
62
      // as that's the format that in-memory store expects.
63
      const { items: entryItems } = await client.withoutLinkResolution.getEntries({
64
        'sys.id[in]': entriesToFetch,
65
        locale: localeCode,
66
        limit: 1000,
67
        skip: 0,
68
      });
69
      return entryItems;
70
    })();
71
72
    // Reduce overfetching: Here you can add custom logic to omit certain fields
73
    // to reduce overfetching result. Fields have to be omitted manually.
74
    // entryItems.forEach((entry) => {
75
    //   entry.fields = {
76
    //     ...omit(entry.fields, 'allIngredients', 'allAuthors'),
77
    //   }
78
    // });
79
80
    addToMemory([...assetItems, ...entryItems]);
81
82
    {
83
      const [referencedEntryIds, referencedAssetIds] =
84
        extractReferencesFromEntriesAsIds(entryItems);
85
86
      // narrow down to the ones which are NOT yet in memory...
87
      const entriesToFetch = referencedEntryIds.filter(
88
        (entryId) => !inMemoryEntities.hasEntry(entryId),
89
      );
90
91
      const assetsToFetch = referencedAssetIds.filter(
92
        (assetId) => !inMemoryEntities.hasAsset(assetId),
93
      );
94
95
      await fetchLevel(depth - 1, {
96
        entriesToFetch,
97
        assetsToFetch,
98
      });
99
    }
100
  }
101
};

1
  if (experience) {
2
    // experience is loaded by getExperience() because it is in Preview+Delivery mode,
3
    // when it EDITOR+READ_ONLY mode, it return undefined, as experience would be postMessage'd from the Studio.
4
    await fetchAdditionalLevels(3, experience, locale, client);
5
  }

1
import { fetchAdditionalLevels } from '../../../utils/earlyPreload';
2
  
3
  //... 
4
  if (experience) {
5
    // experience is loaded by getExperience() because it is in Preview+Delivery mode,
6
    // when it EDITOR+READ_ONLY mode, it return undefined, as experience would be postMessage'd from the Studio.
7
    await fetchAdditionalLevels(3, experience, locale, client);
8
  }
9
10
// And we're creating a contentful SDK client too, via utility function
11
const client = createClientWithConfig(preview);

1
import Experience from '../../../components/Experience';
2
import { getExperience, getConfig as createClientWithConfig } from '../../../utils/getExperience';
3
import { detachExperienceStyles } from '@contentful/experiences-sdk-react';
4
import '../../studio-config';
5
import { fetchAdditionalLevels } from '../../../utils/earlyPreload';
6
7
type Page = {
8
  params: { locale?: string; slug?: string; preview?: string };
9
  searchParams: { [key: string]: string | string[] | undefined };
10
};
11
12
export default async function ExperiencePage({ params, searchParams }: Page) {
13
  const { locale = 'en-US', slug = 'home-page' } = params || {};
14
  const { isPreview, expEditorMode, mode } = searchParams;
15
  const preview = isPreview === 'true' || mode === 'preview';
16
  const editorMode = expEditorMode === 'true';
17
  const { experience, error } = await getExperience(slug, locale, preview, editorMode);
18
19
  const client = createClientWithConfig(preview);
20
21
  if (error) {
22
    return <div>{error.message}</div>;
23
  }
24
25
  if (experience) {
26
    // experience is loaded by getExperience() because it is in Preview+Delivery mode,
27
    // when it EDITOR+READ_ONLY mode, it return undefined, as experience would be postMessage'd from the Studio.
28
    await fetchAdditionalLevels(3, experience, locale, client);
29
  }
30
31
  const stylesheet = experience ? detachExperienceStyles(experience) : null;
32
33
  // experience currently needs to be stringified manually to be passed to the component
34
  const experienceJSON = experience ? JSON.stringify(experience) : null;
35
36
  return (
37
    <main style=&#123;&#123; width: '100%' &#125;&#125;>
38
      {stylesheet && <style data-css-ssr>{`{stylesheet}`}</style>}
39
      <Experience experienceJSON={experienceJSON} locale={locale} debug={true} />
40
    </main>
41
  );
42
}

1
// we are adding state variable which will signal that early preloading was complete
2
const [areAllAdditionalLevelsFetched, setAreAllAdditionalLevelsFetched] = useState(false);
3
4
// we add effect that does actual loading 
5
// and effect has a lot of guards
6
   useEffect(
7
    function effectFetchAdditional() {
8
      if (isLoading) {
9
        return;
10
      }
11
      if (experienceLoadingError) {
12
        return;
13
      }
14
      if (!experience) {
15
        return;
16
      }
17
18
      if (areAllAdditionalLevelsFetched) {
19
        return;
20
      }
21
22
      async function earlyPreload() {
23
        try {
24
          await fetchAdditionalLevels(3, experience, localeCode, client);
25
          await new Promise((resolve) => setTimeout(resolve, 3000)); // for demo
26
          setAreAllAdditionalLevelsFetched(true);
27
      //... 
28
          
29
30
// ... 
31
// We add "loading" progress banner, to signal about early preloading 
32
33
return (
34
    <>
35
      {!shouldShowBannerAboutLoadingAdditionalLevels ? null : (
36
        <h3
37
          style=&#123;&#123;
38
            background: 'black',
39
            color: 'white',
40
            position: 'fixed',
41
            left: '0',
42
            top: '0',
43
            width: '100%',
44
            margin: '0',
45
            padding: '16px',
46
          &#125;&#125;>
47
          Loading additional levels... <sup>(won't trigger on hot-reload)</sup>
48
        </h3>
49
      )}
50
// ....