Is graphQL data editable through Experience Editor

Question

We are working in JSS integrated mode, in one of the page we need to retrieve the child items from a folder and render them. As we are implementing the site in integrated mode, we expect the features like in-context editing enabled for this particular page. Looks like graphQL can be an option to retrieve the folder items other than datasource item and context item, but how do we enable the in-context editing when rendering the page using graphQL data?

Answer 1

In context editing will work only in integrated mode. Write your graphQL something like the below, [retrieve the jss property of the field instead of value]

query RetrieveContentBlocks($itemPath: String = "/sitecore/content/poc-app/Item1") {

      pageItem: item(path: $itemPath)
  {
    children
    {
      name
      contentValue: field(name:"content")
      {
        jss
      }
    }
  }
}

Render the content like below, [render the jss property of the field]

return(
    <div>
      <h2><p>Content Retrieved using GraphQL</p></h2>
      {pageItem && (
          <div>
            <b>children items..!</b>
            <br/>
            <ul>
              {pageItem.children.map((child) => (
                <li key={child.name}>
                  <RichText field={child.contentValue.jss}/>
                </li>
              ))}
            </ul>
          </div>
        )}
    </div>
  );
};