{"id":3257,"date":"2025-02-11T05:31:59","date_gmt":"2025-02-11T05:31:59","guid":{"rendered":"https:\/\/www.skybridgeinfotech.com\/blog\/?p=3257"},"modified":"2025-03-14T10:39:04","modified_gmt":"2025-03-14T10:39:04","slug":"setting-up-a-headless-jss-project-with-graphql-in-sitecore","status":"publish","type":"post","link":"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/","title":{"rendered":"Setting Up a Headless JSS Project with GraphQL in Sitecore"},"content":{"rendered":"\n<h2 class=\"wp-block-heading has-vivid-cyan-blue-color has-text-color has-link-color wp-elements-64b1e464363358b758928235b781b07e\">Setting Up a Headless JSS Project with GraphQL in Sitecore<\/h2>\n\n\n\n<p>Headless development with Sitecore JSS offers powerful frontend flexibility while leveraging the robust content management capabilities of Sitecore. GraphQL enhances this by making content queries efficient, reducing API payload size, and improving performance. This guide walks you through creating a Sitecore JSS project with GraphQL from scratch, ensuring a smooth developer experience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Prerequisites<\/h3>\n\n\n\n<p>Before getting started, ensure you have the following installed:<\/p>\n\n\n\n<ul>\n<li>Node.js (Latest LTS)<\/li>\n\n\n\n<li>Sitecore JSS CLI (<code>npm install -g @sitecore-jss\/sitecore-jss-cli<\/code>)<\/li>\n\n\n\n<li>A Sitecore 10+ instance with JSS enabled<\/li>\n\n\n\n<li>A basic understanding of React and GraphQL<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Create a New JSS Project with GraphQL<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>jss create my-jss-app react --fetchWith=GraphQL\ncd my-jss-app\njss setup<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure Sitecore for GraphQL<\/h3>\n\n\n\n<ol start=\"1\">\n<li><strong>Modify scjssconfig.json<\/strong> to use the GraphQL endpoint:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code><code><strong>{\n\"sitecoreInstance\": \"http:\/\/your-sitecore-instance\",\n\"apiKey\": \"{YOUR-JSS-API-KEY}\",\n\"graphQLEndpoint\": \"\/sitecore\/api\/graph\/edge\"\n}<\/strong><\/code><\/code><\/pre>\n\n\n\n<ol start=\"1\">\n<li><strong>Enable GraphQL in Sitecore<\/strong>:\n<ul>\n<li>Go to \/sitecore\/admin \u2192 <strong>GraphQL<\/strong> \u2192 <strong>Settings<\/strong>.<\/li>\n\n\n\n<li>Ensure the <strong>JSS Schema<\/strong> is exposed.<\/li>\n\n\n\n<li>Modify C:\\inetpub\\wwwroot\\your-sitecore-instance\\App_Config\\Include\\zzz.GraphQL.CORS.config to allow CORS for local development.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Connected vs Integrated Mode<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Connected Mode<\/h4>\n\n\n\n<ul>\n<li>The JSS app runs locally and directly fetches data from Sitecore.<\/li>\n\n\n\n<li>Useful for rapid development without deploying to Sitecore.<\/li>\n\n\n\n<li>Requires <strong>JSS API key<\/strong> and proper GraphQL endpoint configuration.<\/li>\n<\/ul>\n\n\n\n<p>Run your app in connected mode:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code><strong>jss start:connected<\/strong><\/code><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Integrated Mode<\/h4>\n\n\n\n<ul>\n<li>The JSS app is deployed inside Sitecore and fetches data from the same server.<\/li>\n\n\n\n<li>Ideal for production and fully integrated Sitecore environments.<\/li>\n\n\n\n<li>Requires deployment of JSS app using <code>jss deploy<\/code>.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>Deploy and run in integrated mode:\njss deploy app --includeContent\njss start:integrated<\/strong><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Query Sitecore Data with GraphQL<\/h3>\n\n\n\n<p>To test GraphQL queries, open <code>http:\/\/your-sitecore-instance\/sitecore\/api\/graph\/edge\/ui<\/code> and run:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>{\nitem(path: \"\/sitecore\/content\/Home\") {\nname\nurl\nchildren {\nname\nurl\n}\n}\n}<\/strong><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Fetching Data in JSS Without Apollo Client<\/h4>\n\n\n\n<p>Modify your React component to fetch data using the native <code>fetch<\/code> API:<\/p>\n\n\n\n<p>Here is the sample code file: <a href=\"https:\/\/github.com\/krithviktrs\/JSSReference\/blob\/main\/SitecoreContent.js\">https:\/\/github.com\/krithviktrs\/JSSReference\/blob\/main\/SitecoreContent.js<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Rendering Contents Resolver vs Component GraphQL Query<\/h3>\n\n\n\n<p>JSS allows you to configure a <strong>Rendering Contents Resolver<\/strong> on each rendering to determine how data is serialized. The available resolvers include:<\/p>\n\n\n\n<ul>\n<li><strong>Datasource Resolver<\/strong> \u2013 Serializes the rendering&#8217;s datasource item.<\/li>\n\n\n\n<li><strong>Datasource Item Children Resolver<\/strong> \u2013 Serializes the children of the datasource item.<\/li>\n\n\n\n<li><strong>Context Item Resolver<\/strong> \u2013 Serializes the context item instead of the datasource item.<\/li>\n\n\n\n<li><strong>Context Item Children Resolver<\/strong> \u2013 Serializes the children of the context item.<\/li>\n\n\n\n<li><strong>Folder Filter Resolver<\/strong> \u2013 Serializes the descendants of the datasource item, excluding folders.<\/li>\n<\/ul>\n\n\n\n<p>With <strong>GraphQL<\/strong>, you can define the query and receive only the required data, reducing API payloads and improving performance. This is useful when:<\/p>\n\n\n\n<ul>\n<li>Your component needs more data than available in the datasource fields.<\/li>\n\n\n\n<li>You want to exclude unnecessary fields from the response.<\/li>\n\n\n\n<li>You prefer not to use client-side GraphQL libraries like Apollo.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Example: Using Component GraphQL Query Instead of Resolver<\/h4>\n\n\n\n<p>Modify the rendering component by adding a GraphQL query:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>{\nitem(path: \"\/sitecore\/content\/Home\") {\nname\nurl\ncontextItem {\ntitle\n}\n}\n}<\/strong><\/code><\/pre>\n\n\n\n<p>This approach enhances flexibility by fetching <strong>only the necessary fields<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>By using GraphQL in <strong><a href=\"https:\/\/www.skybridgeinfotech.com\/site-core.html\" target=\"_blank\" rel=\"noreferrer noopener\">Sitecore JSS,<\/a><\/strong> you enhance performance, reduce API payloads, and streamline content querying. Whether in <strong>connected<\/strong> or <strong>integrated<\/strong> mode, the setup provides flexibility and speed without requiring external GraphQL clients like Apollo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Setting Up a Headless JSS Project with GraphQL in Sitecore Headless development with Sitecore JSS offers powerful frontend flexibility while [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3281,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"blog-details.php","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[16,30,875,91,872],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>Setting Up a Headless JSS Project with GraphQL in Sitecore - Skybridge<\/title>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Setting Up a Headless JSS Project with GraphQL in Sitecore - Skybridge\" \/>\r\n<meta property=\"og:description\" content=\"Setting Up a Headless JSS Project with GraphQL in Sitecore Headless development with Sitecore JSS offers powerful frontend flexibility while [&hellip;]\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Skybridge\" \/>\r\n<meta property=\"article:published_time\" content=\"2025-02-11T05:31:59+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2025-03-14T10:39:04+00:00\" \/>\r\n<meta property=\"og:image\" content=\"http:\/\/www.skybridgeinfotech.com\/blog\/wp-content\/uploads\/2025\/02\/Setting-Up-a-Headless-JSS-Project-with-GraphQL-in-Sitecore.jpg\" \/>\r\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\r\n\t<meta property=\"og:image:height\" content=\"800\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\r\n<meta name=\"author\" content=\"admin\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/#\/schema\/person\/0f15f3349a8eea9f6c89ae7dac0f3cbc\"},\"headline\":\"Setting Up a Headless JSS Project with GraphQL in Sitecore\",\"datePublished\":\"2025-02-11T05:31:59+00:00\",\"dateModified\":\"2025-03-14T10:39:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/\"},\"wordCount\":473,\"publisher\":{\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.skybridgeinfotech.com\/blog\/wp-content\/uploads\/2025\/02\/Setting-Up-a-Headless-JSS-Project-with-GraphQL-in-Sitecore.jpg\",\"articleSection\":[\"Sitecore\",\"Sitecore CMS\",\"Sitecore Upgrade\",\"Web Design and Development\",\"Web Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/\",\"url\":\"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/\",\"name\":\"Setting Up a Headless JSS Project with GraphQL in Sitecore - Skybridge\",\"isPartOf\":{\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.skybridgeinfotech.com\/blog\/wp-content\/uploads\/2025\/02\/Setting-Up-a-Headless-JSS-Project-with-GraphQL-in-Sitecore.jpg\",\"datePublished\":\"2025-02-11T05:31:59+00:00\",\"dateModified\":\"2025-03-14T10:39:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/#primaryimage\",\"url\":\"https:\/\/www.skybridgeinfotech.com\/blog\/wp-content\/uploads\/2025\/02\/Setting-Up-a-Headless-JSS-Project-with-GraphQL-in-Sitecore.jpg\",\"contentUrl\":\"https:\/\/www.skybridgeinfotech.com\/blog\/wp-content\/uploads\/2025\/02\/Setting-Up-a-Headless-JSS-Project-with-GraphQL-in-Sitecore.jpg\",\"width\":1200,\"height\":800,\"caption\":\"Setting Up a Headless JSS Project with GraphQL in Sitecore\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.skybridgeinfotech.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Setting Up a Headless JSS Project with GraphQL in Sitecore\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/#website\",\"url\":\"https:\/\/www.skybridgeinfotech.com\/blog\/\",\"name\":\"Skybridge\",\"description\":\"Skybridge\",\"publisher\":{\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.skybridgeinfotech.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/#organization\",\"name\":\"Skybridge\",\"url\":\"https:\/\/www.skybridgeinfotech.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/www.skybridgeinfotech.com\/blog\/wp-content\/uploads\/2024\/02\/logo.png\",\"contentUrl\":\"http:\/\/www.skybridgeinfotech.com\/blog\/wp-content\/uploads\/2024\/02\/logo.png\",\"width\":197,\"height\":73,\"caption\":\"Skybridge\"},\"image\":{\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/#\/schema\/person\/0f15f3349a8eea9f6c89ae7dac0f3cbc\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.skybridgeinfotech.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/118323199c026a712094dacfeb0b28dc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/118323199c026a712094dacfeb0b28dc?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/www.skybridgeinfotech.com\/blog\"],\"url\":\"https:\/\/www.skybridgeinfotech.com\/blog\/author\/admin\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Setting Up a Headless JSS Project with GraphQL in Sitecore - Skybridge","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/","og_locale":"en_US","og_type":"article","og_title":"Setting Up a Headless JSS Project with GraphQL in Sitecore - Skybridge","og_description":"Setting Up a Headless JSS Project with GraphQL in Sitecore Headless development with Sitecore JSS offers powerful frontend flexibility while [&hellip;]","og_url":"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/","og_site_name":"Skybridge","article_published_time":"2025-02-11T05:31:59+00:00","article_modified_time":"2025-03-14T10:39:04+00:00","og_image":[{"width":1200,"height":800,"url":"http:\/\/www.skybridgeinfotech.com\/blog\/wp-content\/uploads\/2025\/02\/Setting-Up-a-Headless-JSS-Project-with-GraphQL-in-Sitecore.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/#article","isPartOf":{"@id":"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/"},"author":{"name":"admin","@id":"https:\/\/www.skybridgeinfotech.com\/blog\/#\/schema\/person\/0f15f3349a8eea9f6c89ae7dac0f3cbc"},"headline":"Setting Up a Headless JSS Project with GraphQL in Sitecore","datePublished":"2025-02-11T05:31:59+00:00","dateModified":"2025-03-14T10:39:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/"},"wordCount":473,"publisher":{"@id":"https:\/\/www.skybridgeinfotech.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/#primaryimage"},"thumbnailUrl":"https:\/\/www.skybridgeinfotech.com\/blog\/wp-content\/uploads\/2025\/02\/Setting-Up-a-Headless-JSS-Project-with-GraphQL-in-Sitecore.jpg","articleSection":["Sitecore","Sitecore CMS","Sitecore Upgrade","Web Design and Development","Web Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/","url":"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/","name":"Setting Up a Headless JSS Project with GraphQL in Sitecore - Skybridge","isPartOf":{"@id":"https:\/\/www.skybridgeinfotech.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/#primaryimage"},"image":{"@id":"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/#primaryimage"},"thumbnailUrl":"https:\/\/www.skybridgeinfotech.com\/blog\/wp-content\/uploads\/2025\/02\/Setting-Up-a-Headless-JSS-Project-with-GraphQL-in-Sitecore.jpg","datePublished":"2025-02-11T05:31:59+00:00","dateModified":"2025-03-14T10:39:04+00:00","breadcrumb":{"@id":"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/#primaryimage","url":"https:\/\/www.skybridgeinfotech.com\/blog\/wp-content\/uploads\/2025\/02\/Setting-Up-a-Headless-JSS-Project-with-GraphQL-in-Sitecore.jpg","contentUrl":"https:\/\/www.skybridgeinfotech.com\/blog\/wp-content\/uploads\/2025\/02\/Setting-Up-a-Headless-JSS-Project-with-GraphQL-in-Sitecore.jpg","width":1200,"height":800,"caption":"Setting Up a Headless JSS Project with GraphQL in Sitecore"},{"@type":"BreadcrumbList","@id":"https:\/\/www.skybridgeinfotech.com\/blog\/setting-up-a-headless-jss-project-with-graphql-in-sitecore\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.skybridgeinfotech.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Setting Up a Headless JSS Project with GraphQL in Sitecore"}]},{"@type":"WebSite","@id":"https:\/\/www.skybridgeinfotech.com\/blog\/#website","url":"https:\/\/www.skybridgeinfotech.com\/blog\/","name":"Skybridge","description":"Skybridge","publisher":{"@id":"https:\/\/www.skybridgeinfotech.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.skybridgeinfotech.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.skybridgeinfotech.com\/blog\/#organization","name":"Skybridge","url":"https:\/\/www.skybridgeinfotech.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.skybridgeinfotech.com\/blog\/#\/schema\/logo\/image\/","url":"http:\/\/www.skybridgeinfotech.com\/blog\/wp-content\/uploads\/2024\/02\/logo.png","contentUrl":"http:\/\/www.skybridgeinfotech.com\/blog\/wp-content\/uploads\/2024\/02\/logo.png","width":197,"height":73,"caption":"Skybridge"},"image":{"@id":"https:\/\/www.skybridgeinfotech.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.skybridgeinfotech.com\/blog\/#\/schema\/person\/0f15f3349a8eea9f6c89ae7dac0f3cbc","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.skybridgeinfotech.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/118323199c026a712094dacfeb0b28dc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/118323199c026a712094dacfeb0b28dc?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/www.skybridgeinfotech.com\/blog"],"url":"https:\/\/www.skybridgeinfotech.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.skybridgeinfotech.com\/blog\/wp-json\/wp\/v2\/posts\/3257"}],"collection":[{"href":"https:\/\/www.skybridgeinfotech.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.skybridgeinfotech.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.skybridgeinfotech.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.skybridgeinfotech.com\/blog\/wp-json\/wp\/v2\/comments?post=3257"}],"version-history":[{"count":5,"href":"https:\/\/www.skybridgeinfotech.com\/blog\/wp-json\/wp\/v2\/posts\/3257\/revisions"}],"predecessor-version":[{"id":3323,"href":"https:\/\/www.skybridgeinfotech.com\/blog\/wp-json\/wp\/v2\/posts\/3257\/revisions\/3323"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.skybridgeinfotech.com\/blog\/wp-json\/wp\/v2\/media\/3281"}],"wp:attachment":[{"href":"https:\/\/www.skybridgeinfotech.com\/blog\/wp-json\/wp\/v2\/media?parent=3257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.skybridgeinfotech.com\/blog\/wp-json\/wp\/v2\/categories?post=3257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.skybridgeinfotech.com\/blog\/wp-json\/wp\/v2\/tags?post=3257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}