Refactor duplicate GraphQL to Fragment, eliminate all the spread syntax

src/templates/category-template.jsx

@@ -5,14 +5,15 @@ import CategoryTemplateDetails from '../components/CategoryTemplateDetails';
 
 class CategoryTemplate extends React.Component {
   render() {
-    const { title } = this.props.data.site.siteMetadata;
-    const { category } = this.props.pathContext;
+    const title = this.props.data.site.siteMetadata.title;
+    const category = this.props.pathContext.category;
+    const posts = this.props.data.allMarkdownRemark.edges
 
     return (
       <div>
         <Helmet title={`${category} - ${title}`} />
-        <Sidebar {...this.props} />
-        <CategoryTemplateDetails {...this.props} />
+        <Sidebar siteMetadata={this.props.data.site.siteMetadata} />
+        <CategoryTemplateDetails category={category} posts={posts} />
       </div>
     );
   }
@@ -24,22 +25,7 @@ export const pageQuery = graphql`
   query CategoryPage($category: String) {
     site {
       siteMetadata {
-        title
-        subtitle
-        copyright
-        menu {
-          label
-          path
-        }
-        author {
-          name
-          email
-          telegram
-          twitter
-          github
-          rss
-          vk
-        }
+        ...sidebarFragment
       }
     }
     allMarkdownRemark(

src/templates/page-template.jsx

@@ -4,7 +4,8 @@ import PageTemplateDetails from '../components/PageTemplateDetails';
 
 class PageTemplate extends React.Component {
   render() {
-    const { title, subtitle } = this.props.data.site.siteMetadata;
+    const siteMetadata = this.props.data.site.siteMetadata;
+    const { title, subtitle } = siteMetadata;
     const page = this.props.data.markdownRemark;
     const { title: pageTitle, description: pageDescription } = page.frontmatter;
     const description = pageDescription !== null ? pageDescription : subtitle;
@@ -15,7 +16,10 @@ class PageTemplate extends React.Component {
           <title>{`${pageTitle} - ${title}`}</title>
           <meta name="description" content={description} />
         </Helmet>
-        <PageTemplateDetails {...this.props} />
+        <PageTemplateDetails
+          siteMetadata={siteMetadata}
+          page={page}
+        />
       </div>
     );
   }
@@ -27,22 +31,7 @@ export const pageQuery = graphql`
   query PageBySlug($slug: String!) {
     site {
       siteMetadata {
-        title
-        subtitle
-        copyright
-        menu {
-          label
-          path
-        }
-        author {
-          name
-          email
-          telegram
-          twitter
-          github
-          rss
-          vk
-        }
+        ...sidebarFragment
       }
     }
     markdownRemark(fields: { slug: { eq: $slug } }) {

src/templates/post-template.jsx

@@ -4,7 +4,8 @@ import PostTemplateDetails from '../components/PostTemplateDetails';
 
 class PostTemplate extends React.Component {
   render() {
-    const { title, subtitle } = this.props.data.site.siteMetadata;
+    const siteMetadata = this.props.data.site.siteMetadata;
+    const { title, subtitle } = siteMetadata;
     const post = this.props.data.markdownRemark;
     const { title: postTitle, description: postDescription } = post.frontmatter;
     const description = postDescription !== null ? postDescription : subtitle;
@@ -15,7 +16,7 @@ class PostTemplate extends React.Component {
           <title>{`${postTitle} - ${title}`}</title>
           <meta name="description" content={description} />
         </Helmet>
-        <PostTemplateDetails {...this.props} />
+        <PostTemplateDetails siteMetadata={siteMetadata} post={post} />
       </div>
     );
   }
@@ -29,7 +30,6 @@ export const pageQuery = graphql`
       siteMetadata {
         title
         subtitle
-        copyright
         author {
           name
           twitter

src/templates/tag-template.jsx

@@ -11,8 +11,8 @@ class TagTemplate extends React.Component {
     return (
       <div>
         <Helmet title={`All Posts tagged as "${tag}" - ${title}`} />
-        <Sidebar {...this.props} />
-        <TagTemplateDetails {...this.props} />
+        <Sidebar siteMetadata={this.props.data.site.siteMetadata} />
+        <TagTemplateDetails posts={this.props.data.allMarkdownRemark.edges} tag={tag}/>
       </div>
     );
   }
@@ -24,22 +24,7 @@ export const pageQuery = graphql`
   query TagPage($tag: String) {
     site {
       siteMetadata {
-        title
-        subtitle
-        copyright
-        menu {
-          label
-          path
-        }
-        author {
-          name
-          email
-          telegram
-          twitter
-          github
-          rss
-          vk
-        }
+        ...sidebarFragment
       }
     }
     allMarkdownRemark(