# Video Production Plan : Video 6 — Fetching and Rendering Content with the SDK ### About this export | Field | Value | | --- | --- | | **content_type** | lesson | | **platform** | contentstack-academy | | **source_url** | https://www.contentstack.com/academy/courses/video-production-plan/video-production-plan-video-6-fetching-and-rendering-content-with-the-sdk | | **course_slug** | video-production-plan | | **lesson_slug** | video-production-plan-video-6-fetching-and-rendering-content-with-the-sdk | | **markdown_file_url** | /academy/md/courses/video-production-plan/video-production-plan-video-6-fetching-and-rendering-content-with-the-sdk.md | | **generated_at** | 2026-08-26T11:17:53.308Z | > Part of **[Video Production Plan](https://www.contentstack.com/academy/courses/video-production-plan)** on Contentstack Academy. **Academy MD v3** — structured for retrieval; no quiz or assessment keys. #### Lesson text # Video 6 — Fetching and Rendering Content with the SDK Attribute Details Course 3 (APIs and Developer Tooling), Module 3.2 (lessons 1-2) Covers Lessons 3.2.1, 3.2.2 Priority Critical Length 15-22 min Format Screencast (code editor + browser) Status Not started ## Why This Video Matters This is the moment the platform becomes real for developers. Learners watch content move from Contentstack into application code. ## Outline 1. SDK initialization: setting up the JavaScript SDK with stack API key, delivery token, and environment 2. Stack client setup and configuration 3. Fetching entries by content type, UID, and URL 4. Query chaining: conditions, sorting, pagination 5. Live-code a few common queries against the Veda stack 6. References and includes: how to resolve referenced entries in a single query (include depth levels) 7. Localization in queries: fetching locale-specific content, fallback behavior 8. Rendering a realistic response shape in the frontend ## Key Lines "This is the moment the platform becomes real for developers." "You are not just fetching content. You are shaping how the app consumes it." "Understanding the response object makes everything else easier." ## Detailed Talking Points ### 1\. SDK initialization: setting up the JavaScript SDK with stack API key, delivery token, and environment * Install @contentstack/delivery-sdk (not the legacy contentstack package). This is the modern, TypeScript-first SDK with tree-shaking support. * Call Contentstack.stack() with four required values: apiKey, deliveryToken, environment, and region. * Show where each credential lives in the dashboard: API key in Settings > Stack, delivery token in Settings > Tokens > Delivery Tokens. * Emphasize that region must match the data center where the stack was created. Wrong region gives empty results or 401 with zero hint about the actual cause. * Delivery tokens are scoped to a specific environment. Token for staging does not work when environment is set to production. * The SDK does not throw on initialization if credentials are empty strings. The error surfaces on the first query as a cryptic 401 or 412. Validate at startup. * Optional: pass branch if the stack uses branches. Without it, the SDK queries the main branch. ### 2\. Stack client setup and configuration * Walk through a real stack instance in code. Show the import: import Contentstack from "@contentstack/delivery-sdk". * Show environment variables pattern: process.env.NEXT\_PUBLIC\_CONTENTSTACK\_API\_KEY, etc. * Demonstrate Contentstack.Region.US vs Contentstack.Region.EU -- these are built-in constants, not arbitrary strings. * Mention branch configuration for teams doing parallel content development: branch: "feature-digital-dawn-v2". * Stress that this stack instance is reused across the entire app. You initialize once, query many times. ### 3\. Fetching entries by content type, UID, and URL * Show stack.contentType("product").entry().query().find() -- this fetches all entries of a content type. * Show stack.contentType("product").entry("blt\_matrix\_link\_001").fetch() -- single entry by UID. Returns the entry directly, not wrapped in an array. * Show fetching by URL with .equalTo("url", "/products/digital-dawn/matrix-link-bracelet") -- this drives most page rendering in frontend frameworks. * Explain the difference: find() returns { entries: \[\], count: number }, while fetch() returns the entry object directly. * Under the hood, these map to GET /v3/content\_types/product/entries and GET /v3/content\_types/product/entries/{uid}. * Fetching by UID is faster and more cache-friendly than querying with a filter when you already have the UID. ### 4\. Query chaining: conditions, sorting, pagination * Show .equalTo("category", "blt\_earrings\_category\_001") for simple equality filters. * Show .where("price", QueryOperation.IS\_GREATER\_THAN, 100) for comparison operators. Import QueryOperation from the SDK. * List available operators: IS\_LESS\_THAN, IS\_GREATER\_THAN, EQUALS, INCLUDES -- these map to Contentstack's $gt, $lt, $in, $nin, etc. * Pagination: .limit(10).skip(0) for page 1, .limit(10).skip(10) for page 2. Default max is 100 entries per request. * Sorting: .orderByAscending("price") or .orderByDescending("created\_at"). * Stress that all these chain before .find(). The query is built, then executed. ### 5\. Live-code a few common queries against the Veda stack * Query 1: All products, sorted by price ascending. Show the response shape in the console. * Query 2: Products above $200 using .where("price", QueryOperation.IS\_GREATER\_THAN, 200). * Query 3: Paginated product listing -- first 5 products, then next 5. Show skip and limit in action. * Query 4: Products filtered by URL slug for a single product detail page. * Keep each query short. Type it live, run it, show the console output. No slides. * Point out system fields in the response: uid, created\_at, updated\_at, locale, \_version. ### 6\. References and includes: how to resolve referenced entries in a single query (include depth levels) * Without includeReference(), reference fields return UID stubs: { uid: "blt...", \_content\_type\_uid: "product\_line" }. You get the pointer, not the data. * Chain .includeReference("product\_line") to resolve references inline. Multiple fields: chain multiple .includeReference() calls. * The parameter takes the reference _field UID_ on the parent content type, not the content type UID of the target. This trips people up. * Depth levels via dot notation: .includeReference("product\_line.products") resolves two levels deep. * Performance: depth 1 is standard and fast. Depth 2 is acceptable. Depth 3+ risks payload bloat and increased latency. Only include what the current view renders. * Show the include\_all shorthand via .addParams({ include\_all: true, include\_all\_depth: 2 }) -- useful for page-level queries but less efficient for listing pages. * Anti-pattern: including everything "just in case." Each unnecessary include adds latency and bytes. ### 7\. Localization in queries: fetching locale-specific content, fallback behavior * Add .locale("fr-fr") to any query to fetch content in a specific locale. * Without include\_fallback, untranslated fields come back as empty or null. Visitors see blank content. * Chain .includeFallback() to walk the fallback chain: fr-ca -> fr -> en-us (master locale). * When references and locale are combined, referenced entries resolve in the same locale automatically. No need to specify locale per reference. * Gotcha: if a referenced entry does not exist in the requested locale and has no fallback, it may be excluded entirely from the response. Test locale coverage across content types. * Show publish\_details on the entry to determine which locale the content actually came from. ### 8\. Rendering a realistic response shape in the frontend * Map the SDK response to component props. Show a Product component receiving title, price, short\_description, product\_line\[0\].title. * Handle null fields defensively. Not every entry has every field filled in, especially with partial localization. * Use TypeScript generics on find() and fetch(): query.find() gives typed result.entries as Product\[\]. * Define types matching the content type schema. Reference the kickstart-veda lib/types.ts as a real-world example. * Show the before/after: untyped response with any vs typed response with autocomplete and compile-time checks. * Stress that understanding the response object makes everything else easier. Once you know the shape, rendering is straightforward. ## Screen: What to Show Timestamp Screen content 0:00-2:00 VS Code with empty file. Type the npm install command, then the SDK import and Contentstack.stack() call. Terminal split showing install output. 2:00-3:30 Contentstack dashboard: Settings > Stack (show API key), Settings > Tokens > Delivery Tokens (show token + environment scope), Settings > Stack Information (show region). 3:30-5:00 Back to VS Code. Complete the stack initialization with env vars. Add a simple contentType("product").entry().query().find() call. Run it. Show console output with entry array. 5:00-7:00 Live-code .entry("blt\_matrix\_link\_001").fetch() for single entry. Then .equalTo("url", "/products/digital-dawn/matrix-link-bracelet") for URL-based fetch. Run both, compare output shapes. 7:00-9:00 Build query chains live: .where("price", QueryOperation.IS\_GREATER\_THAN, 200), then add .orderByAscending("price"), then .limit(5).skip(0). Run after each addition so viewers see the query narrowing. 9:00-11:00 Show a product response with unresolved reference stubs. Add .includeReference("product\_line").includeReference("category"). Run again. Highlight the before/after difference in the console -- stubs vs full objects. 11:00-12:30 Show nested include: .includeReference("product\_line.products"). Run it. Show the expanded payload. Briefly open browser DevTools Network tab to show response size difference. 12:30-14:00 Add .locale("fr-fr") to the query. Run it. Show translated fields. Remove .includeFallback() and show blank fields. Add it back. Show fallback content appearing. 14:00-16:00 Switch to a React component file. Map the response to props: product.title, product.price, product.product\_line\[0\]?.title. Show null-safe access patterns. 16:00-18:00 Add TypeScript generics: query.find(). Show autocomplete kicking in. Show a type definition file matching the content type schema. 18:00-end Browser showing rendered Veda product page with data flowing from Contentstack. Zoom into the product card showing title, price, product line name, category. ## Veda Scenario Thread Veda: The Revival Collection (jewelry e-commerce) runs through this entire video as the practical context. * **Opening:** "We have a Veda jewelry catalog with products, product lines, and categories. Let us connect to it." Initialize the SDK with Veda stack credentials. * **First queries:** Fetch all Veda products. Then filter to products over $200 -- show items like the Matrix Link Bracelet ($295) appearing in results. * **Single entry:** Fetch the Matrix Link Bracelet by UID (blt\_matrix\_link\_001) and by URL (/products/digital-dawn/matrix-link-bracelet). Show both paths to the same entry. * **References:** Show the Matrix Link Bracelet with unresolved product\_line and category stubs. "Right now we know this product belongs to _something_, but we do not know what." Add includeReference() calls. "Now we see Digital Dawn and Bracelets." * **Nested references:** Include product\_line.products to show other products in the Digital Dawn line (Pixel Stud Earrings, etc.). Talk about when this depth is worth the payload cost. * **Localization:** Switch the query to fr-fr. Show the Matrix Link Bracelet with French title ("Bracelet Maillon Matrice") where translated, English fallback where not. Show the gap without includeFallback(). * **Rendering:** Build a simple Veda product card component. Map product.title, product.price, product.product\_line\[0\].title, product.category\[0\].title to the card layout. Show it rendering in the browser. * **Closing:** "This is how Veda goes from CMS entries to a rendered product page. Every query pattern we covered -- filtering, pagination, references, localization -- is something you will use building pages like this." ## Transitions 1. **Intro to SDK initialization:** "Before you can render anything, you need a connection to your stack. Let us set one up." 2. **SDK init to stack client setup:** "The stack instance is created. Now let us look at what configuration options matter and where to find each credential." 3. **Stack client to fetching entries:** "Configuration is done. Time to fetch actual content." 4. **Fetching entries to query chaining:** "Fetching everything is a start, but real apps need filters, sorting, and pagination." 5. **Query chaining to live coding:** "Enough theory. Let us write these queries against real Veda data and see what comes back." 6. **Live coding to references and includes:** "Our queries return products, but the product line and category fields are just UID stubs. Let us fix that." 7. **References to localization:** "References are resolved. Now what happens when your site serves content in multiple languages?" 8. **Localization to rendering:** "We can fetch content in any locale with fallbacks. The last step is mapping this data to components." 9. **Closing to Video 7:** "You now know how to fetch, filter, resolve, and render content from Contentstack. In the next video, we tackle Live Preview -- seeing content changes in real time before they are published." ## Common Mistakes to Call Out * **Wrong region, silent failure:** Initializing with Region.US when the stack is in EU. The SDK does not tell you the region is wrong. You get empty results or a 401. Always verify in Settings > Stack Information. * **Environment/token mismatch:** The delivery token is scoped to one environment. Using a staging token with environment: "production" fails silently or returns auth errors. * **Empty credential strings:** The SDK accepts empty strings at init time without throwing. The first query fails with a cryptic 401 or 412. Validate credentials before the first query. * **Using content type UID instead of field UID in** **includeReference()****:** include\[\]=categories when the field UID is category returns 200 but references stay as stubs. The parameter is the _field UID_ on the parent, not the target content type UID. * **Forgetting** **includeFallback()** **on partially localized stacks:** Without it, untranslated fields return empty. Visitors see blank sections instead of parent-locale content. * **Over-including nested references:** Including product\_line.products.category (three levels deep) balloons the response payload. Only include what the current view actually renders. * **Assuming all referenced entries exist in all locales:** If categories are only in English and you request ja-jp without fallback, categories come back empty or missing entirely. * **Not handling null fields in rendering:** Partial localization and optional fields mean any field can be null. Always use null-safe access (product.product\_line\[0\]?.title) or default values. ## Notes Use this space for recording notes, script drafts, or post-production feedback. #### Key takeaways - Connect **Video Production Plan : Video 6 — Fetching and Rendering Content with the SDK** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ## Supplement for indexing ### Content summary Video Production Plan : Video 6 — Fetching and Rendering Content with the SDK. Video 6 — Fetching and Rendering Content with the SDK Attribute Details Course 3 (APIs and Developer Tooling), Module 3.2 (lessons 1-2) Covers Lessons 3.2.1, 3.2.2 Priority Critical Length 15-22 min Format Screencast (code editor + browser) Status Not started Why This Video Matters This is the moment the platform becomes real for developers. Learners watch content move from Contentstack into application code. Outline 1. SDK initialization: setting up the JavaScript SDK with stack API key, delivery token, and environment 2. Stack client setup and configuration 3. Fetching entries by content type, UID, and URL 4. Query chaining: conditions, sorting, pagination 5. Live-code a few common queries ### Retrieval tags - Video - Production - Plan - Fetching - and - video-production-plan - lesson 21 - Video Production Plan : Video 6 — Fetching and Rendering Content with the SDK - video-production-plan lesson ### Indexing notes Index this lesson as a primary chunk tagged with lesson_id "21" and topics: [Video, Production, Plan, Video, Fetching, and]. Parent course slug: video-production-plan. Use asset_references URLs as thumbnail hints in search results when present. Never surface LMS quiz content or assessment answers from this file. ### Asset references _No image or video thumbnail URLs were extracted._ ### External links | Label | URL | | --- | --- | | Contentstack Academy home | `https://www.contentstack.com/academy/` | | Training instance setup | `https://www.contentstack.com/academy/training-instance` | | Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` | | Contentstack documentation | `https://www.contentstack.com/docs/` |