Refactor duplicate GraphQL to Fragment, eliminate all the spread syntax

src/components/CategoryTemplateDetails/index.jsx

@@ -4,8 +4,8 @@ import Post from '../Post';
 class CategoryTemplateDetails extends React.Component {
   render() {
     const items = [];
-    const { category } = this.props.pathContext;
-    const posts = this.props.data.allMarkdownRemark.edges;
+    const { category } = this.props.category;
+    const posts = this.props.posts;
     posts.forEach((post) => {
       items.push(<Post data={post} key={post.node.fields.slug} />);
     });

src/components/Disqus/Disqus.jsx

@@ -19,15 +19,12 @@ class Disqus extends Component {
     this.setState({ toasts });
   }
   render() {
-    const { postNode, siteMetadata } = this.props;
-    if (!siteMetadata.disqusShortname) {
-      return null;
-    }
+    const { postNode, shortName, url:siteUrl } = this.props;
     const post = postNode.frontmatter;
-    const url = siteMetadata.url + postNode.fields.slug;
+    const url = siteUrl + postNode.fields.slug;
     return (
       <ReactDisqusComments
-        shortname={siteMetadata.disqusShortname}
+        shortname={shortName}
         identifier={post.title}
         title={post.title}
         url={url}

src/components/PageTemplateDetails/index.jsx

@@ -4,11 +4,11 @@ import './style.scss';
 
 class PageTemplateDetails extends React.Component {
   render() {
-    const page = this.props.data.markdownRemark;
+    const page = this.props.page;
 
     return (
       <div>
-        <Sidebar {...this.props} />
+        <Sidebar siteMetadata={this.props.siteMetadata} />
         <div className="content">
           <div className="content__inner">
             <div className="page">

src/components/PostTemplateDetails/index.jsx

@@ -6,8 +6,8 @@ import './style.scss';
 
 class PostTemplateDetails extends React.Component {
   render() {
-    const { subtitle, author } = this.props.data.site.siteMetadata;
-    const post = this.props.data.markdownRemark;
+    const { subtitle, author, disqusShortname, url } = this.props.siteMetadata;
+    const post = this.props.post;
     const tags = post.fields.tagSlugs;
 
     const homeBlock = (
@@ -32,7 +32,7 @@ class PostTemplateDetails extends React.Component {
 
     const commentsBlock = (
       <div>
-        <Disqus postNode={post} siteMetadata={this.props.data.site.siteMetadata} />
+        <Disqus postNode={post} shortName={disqusShortname} url={url}/>
       </div>
     );
 
@@ -56,7 +56,7 @@ class PostTemplateDetails extends React.Component {
                 <br /> <strong>{author.name}</strong> on Twitter
               </a>
             </p>
-            {commentsBlock}
+            {disqusShortname && commentsBlock}
           </div>
         </div>
       </div>

src/components/Sidebar/index.jsx

@@ -9,7 +9,7 @@ import './style.scss';
 class Sidebar extends React.Component {
   render() {
     const { location } = this.props;
-    const { author, subtitle, copyright, menu } = this.props.data.site.siteMetadata;
+    const { author, subtitle, copyright, menu } = this.props.siteMetadata;
     const isHomePage = get(location, 'pathname', '/') === '/';
 
     /* eslint-disable jsx-a11y/img-redundant-alt */
@@ -58,3 +58,24 @@ class Sidebar extends React.Component {
 }
 
 export default Sidebar;
+
+export const conponentQuery = graphql`
+  fragment sidebarFragment on siteMetadata_2{
+    title
+    subtitle
+    copyright
+    menu {
+      label
+      path
+    }
+    author {
+      name
+      email
+      telegram
+      twitter
+      github
+      rss
+      vk
+    }
+  }
+`;

src/components/TagTemplateDetails/index.jsx

@@ -4,8 +4,8 @@ import Post from '../Post';
 class TagTemplateDetails extends React.Component {
   render() {
     const items = [];
-    const tagTitle = this.props.pathContext.tag;
-    const posts = this.props.data.allMarkdownRemark.edges;
+    const tagTitle = this.props.tag;
+    const posts = this.props.posts;
     posts.forEach((post) => {
       items.push(<Post data={post} key={post.node.fields.slug} />);
     });