Get a peek at our latest innovations at Sanity Product Day on Dec 8th →

How to Create a Gatsby Page for Authors

8 replies
Last updated: Apr 17, 2020

Hi, I'm trying to create a page (using Gatsby) for every author. I've got it to where a page is created with all their information entered into Sanity Studio, but I'd like to have all of their posts on the site displayed on the page too. Is there a way anyone has found to make this happen?

Apr 17, 2020, 3:25 AM

Thanks for your help on this!. Here is what I have in gatsby-node.js:

const authorEdges = (result.data.allSanityAuthor || {}).edges || []

const _id = authorEdges._id

authorEdges

.forEach((_edge_, _index_) => {

const {name, slug = {}} = edge.node
`const path = `/author/${slug.current}/``

`
reporter.info (
Creating author page: ${path}
)`

createPage({

path,

_id,

component: require.resolve('./src/templates/author-page.js'),

context: _id

})

})

And then this is in the template file query:

posts: allSanityPost(filter: {authors: {elemMatch: {author: {_id: {eq: "{$_id}"}}}}})

No luck so far though, do you have any suggestions of what I might be doing wrong here?

Apr 17, 2020, 7:41 PM

Oh interesting, I don't have person in my schema, I have 'author' instead

Apr 17, 2020, 8:02 PM

I got the query from the GraphQL playground.When I query

allSanityPost(filter: {authors: {elemMatch: {author: {id: {eq: "$_id"}}}}})
I get this error message:

Variable "$_id" is not defined by operation "AuthorPageTemplateQuery".

Apr 17, 2020, 8:08 PM

I get that error message when I query it in my template file

Apr 17, 2020, 8:09 PM

I was hoping to do this programaticaly where it would automatically create one for every author. Is that possible?

Apr 17, 2020, 8:10 PM

yep, this is what I've got:

query AuthorPageTemplateQuery($_id: String!) {

Apr 17, 2020, 8:13 PM

Oh I finally got it! Thank you so much. I don't know why I couldn't get _id to work, but I tried passing the author name through and matching to that, that worked for me. For anyone's future reference, the final query I used on the template page is:
`export const query = graphql``

query AuthorPageTemplateQuery($name: String!) {

post: sanityAuthor(name: {eq: $name}) {

name

_id

image {

...SanityImage

alt

caption

}

slug {

current

}

_rawBio

}


posts: allSanityPost(filter: {authors: {elemMatch: {author: {name: {eq: $name}}}}}) {

edges {

node {

id

authors {

author {

name

id

}

}

categories {

title

_type

_id

id

color

}

publishedAt

mainImage {

...SanityImage

alt

caption

}

title

_rawExcerpt

Action1Title

Action1URL

slug {

current

}

}

}

}

}
```

and this is the function in my node file:

async function createAuthorPages (_graphql_, _actions_, _reporter_) {

const {createPage} = actions
`const result = await graphql(``

{

allSanityAuthor {

edges {

node {

name

_id

slug {

current

}

_rawBio

}

}

}

}
``)`


if (result.errors) throw result.errors


const authorEdges = (result.data.allSanityAuthor || {}).edges || []

const _id = authorEdges._id

authorEdges

// .filter(edge => !isFuture(edge.node.publishedAt))

.forEach((_edge_, _index_) => {

const {name, slug = {}} = edge.node

// const dateSegment = format(publishedAt, "YYYY/MM");
`const path = `/author/${slug.current}/``

`
reporter.info (
Creating author page: ${path}
)`

createPage({

path,

name,

component: require.resolve('./src/templates/author-page.js'),

context: name

})

})

}

Apr 17, 2020, 9:23 PM

Thanks so much again Vince

Apr 17, 2020, 9:24 PM

Sanity.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Free to get started, and pay-as-you-go on all plans. Find out more.