GraphQL datasource is empty with Integrated JSS App

Question

I have a query that is working in the GraphiQL UI :

query GetBreadcrumb($datasource: String!) {
  datasource(value: $datasource) {
    ...mySelectedFields
    parent {
      ...mySelectedFields
      parent {
        ...mySelectedFields
        parent {
          ...mySelectedFields
          parent {
            ...mySelectedFields
            parent {
              ...mySelectedFields
            }
          }
        }
      }
    }
  }
}

fragment mySelectedFields on Item {
  name
  id
  displayName
  url(options: {disableLanguageEmbedding: true})
  ... on AppRoute {
    pageIndex {
      value
    }
  }
}

I would like to test it on the server in connected mode but when I call my component, the datasource value is not passed and it should have been filled with the object database id as far as I understood (I'm using Integrated mode).

Here is my component definition :

// eslint-disable-next-line no-unused-vars
import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
import fs from 'fs';

const query = fs.readFileSync(
  'sitecore/definitions/components/GraphQL-Breadcrumb.sitecore.graphql',
  'utf8'
);

/**
 * Adds the GraphQL-IntegratedDemo component to the disconnected manifest.
 * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
 * @param {Manifest} manifest Manifest instance to add components to
 */
export default function(manifest) {
  manifest.addComponent({
    name: 'GraphQL-Breadcrumb',
    icon: SitecoreIcon.GraphConnection_directed,
    graphQLQuery: query,
    fields: [
      { name: 'sample', type: CommonFieldTypes.SingleLineText },
    ]
  });
}

and here is my component code :

import './stylesheet.scss';

import * as React from 'react';
import { Text } from '@sitecore-jss/sitecore-jss-react';
import { Link as RouterLink } from 'react-router-dom';
export interface Field {
  value?: string;
  editable?: string;
}

export interface GraphQLBreadcrumbProps { 
    fields: { [ name: string ]: any};
}

export const GraphQLBreadcrumb: React.FunctionComponent<GraphQLBreadcrumbProps> = ({ fields }: GraphQLBreadcrumbProps): JSX.Element => {
    console.log(fields);

    return (
    <div className='GraphQLBreadcrumb-box'>
        <p>GraphQL-Breadcrumb Component</p>


    </div>
    );
};

I would like to know why my datasource is empty in my data. Did I miss a configuration step ?

Answer 1

Using a GraphQL query with a predefined hierarchy for a breadcrumb component can be difficult to manage. This is because

• You will already limit the query's depth to a certain level in the content tree. So, if tomorrow you change the content tree structure, you'll need to update your GraphQL.

• With OOTB GraphQL query, it is difficult to remove items that should not be present in the breadcrumb. For example, if you have the following path

  Site A -> Content Repository -> Articles -> Article 1

Your breadcrumb would normally looks like Home/Articles/Article 1. You can write a custom resolver to remove the unnecessary item but you will at the end "hard code" the different items that should not be present in the breadcrumb and will require to update the code each time an item is added.

Returning to your question, the datasource will be blank if no datasource has been added to your rendering parameters.

Solution that worked for me

Recently, I've written a post on how to create a breadcrumb and it is independent of your content tree. You can choose which item should be added to the breadcrumb.

So, basically, you would need to implement a custom GraphQL query and a new template. For my case, the template contains 2 fields namely:

1. Breadcrumb Title (Single Line Text)
2. Show on Breadcrumb (Checkbox)

Then the custom GraphQL looks as follows:

query BreadcrumbQuery($itemId: String!) {
  allpath(itemId: $itemId) {
    breadcrumbs {
      name
      path
    }
  }
}

For the full implementation, please read my blog on Sitecore JSS – A Breadcrumb with GraphQL