Watch a live product demo 👀 See how Sanity powers richer commerce experiences

Creating author pages with Gatsby and Sanity Studio

27 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
You can do a graphql filter with the authorId on an allSanityPost query.
Apr 17, 2020, 4:12 AM
something like allSanityPost (filter: { author: { id: { eq: $authorId }}})
Apr 17, 2020, 4:16 AM
Assuming you passed the authorId on your createPage context
Apr 17, 2020, 4:16 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
The author is an object
Apr 17, 2020, 7:44 PM
It has a person inside it
Apr 17, 2020, 7:44 PM
Heres what it looks like
Apr 17, 2020, 7:45 PM
You’re missing another nested object person on the elemMatch
Apr 17, 2020, 7:47 PM
You also don’t need paranthesis. You can just do { eq: $_id }
Apr 17, 2020, 7:49 PM
Oh interesting, I don't have person in my schema, I have 'author' instead
Apr 17, 2020, 8:02 PM
Try the ___graphql playground that gatsby provides, it has an autocomplete feature to help with missing parameters. If you have an author on your schema, then use author instead to reach it’s _id
Apr 17, 2020, 8:06 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
So with the playground you cannot query with $_id since it doesn’t know where it’s coming from
Apr 17, 2020, 8:09 PM
Query one of your authors and grab it’s id and copy paste that to the filter
Apr 17, 2020, 8:09 PM
I get that error message when I query it in my template file
Apr 17, 2020, 8:09 PM
It should work
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
Di you do do a query ($_id: String!)
Apr 17, 2020, 8:11 PM
You need to define it first on your query
Apr 17, 2020, 8:12 PM
yep, this is what I've got:
query AuthorPageTemplateQuery($_id: String!) {
Apr 17, 2020, 8:13 PM
Oh i got
Apr 17, 2020, 8:17 PM
Remove the “” on your filter
Apr 17, 2020, 8:18 PM
It should be { eq: $_id }
Apr 17, 2020, 8:18 PM
Not { eq: “$_id” }
Apr 17, 2020, 8:19 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
You might want to use the id since that’s unique. You might end up having authors with the same name. But yeah your query works because you don’t have the parenthesis on the $name. If you try it with _id it should work as well
Apr 17, 2020, 11:35 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Categorized in

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing