massage graphql queries

index-final.js

import React from 'react';
import { Link } from 'gatsby';
import Layout from '../components/layout';
import PostPreview from '../components/post-preview';
import usePosts from '../components/hooks/use-posts';

export default () => {
  const posts = usePosts();
  return (
    <Layout>
      <h1>Home</h1>
      <p>Hello Frontend Masters!</p>
      <Link to="/about">About Page</Link>
      <h2>Read My Blog</h2>
      {posts.map(post => (
        <PostPreview key={post.slug} post={post} />
      ))}
    </Layout>
  );
};

index.js

import React from 'react';
import { Link } from 'gatsby';
import Layout from '../components/layout';
import usePosts from '../components/hooks/use-posts';

export default () => {
  const posts = usePosts();
  return (
    <Layout>
      <h1>Home</h1>
      <p>Hello Frontend Masters!</p>
      <Link to="/about">About Page</Link>
      <h2>Read My Blog</h2>
      {posts.map(post => (
        <pre>{JSON.stringify(post, null, 2)}</pre>
      ))}
    </Layout>
  );
};

use-posts.js

import { graphql, useStaticQuery } from 'gatsby';

const UsePosts = () => {
  const data = useStaticQuery(graphql`
    query {
      allMdx {
        nodes {
          excerpt
          frontmatter {
            title
            slug
            author
          }
        }
      }
    }
  `);

  return data.allMdx.nodes.map(post => ({
    title: post.frontmatter.title,
    author: post.frontmatter.author,
    slug: post.frontmatter.slug,
    excerpt: post.excerpt,
  }));
};

export default UsePosts;

<pre>{JSON.stringify(post, null, 2)}</pre>
is a cool way to preview content