Skip to content

Instantly share code, notes, and snippets.

@fpigeonjr
Last active September 21, 2019 02:10
Show Gist options
  • Save fpigeonjr/e199ced9359e1ec2f4cfc1847c0a5a45 to your computer and use it in GitHub Desktop.
Save fpigeonjr/e199ced9359e1ec2f4cfc1847c0a5a45 to your computer and use it in GitHub Desktop.
massage graphql queries
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>
);
};
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>
);
};
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;
@fpigeonjr
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment