Gatsby v4 - Joining Author Details Into a Post [closed] - graphql

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 10 months ago.
Improve this question
Using Gatsby v4. In my blog posts there is a field author. There is a separate authors file which includes details of the blog post authors - full name and avatar.
Post File:
---
date: "2021-12-31"
title: "Happy New Year"
author: chuck
---
## Happy New Year!
content/authors/author.yaml
- id: chuck
name: Chuck Norris
avatar: chuck.jpg
The GraphQL looks like this:
export const pageQuery = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
excerpt(pruneLength: 200)
frontmatter {
title
author {
id
name
avatar
},
}
fields {
slug
readingTime {
minutes
}
}
}
}
But in the BlogPost template the data.markdownRemark.frontmatter.author is null.
In gatsby-config.js I have:
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/authors`,
name: `authors`
}
},
and
mapping: {
'MarkdownRemark.frontmatter.author': `AuthorYaml`
}
But it doesn't help. Same code used to work on Gatsby v2 and stops working with conversion to v4.

Turns out there was a typo in a different place that causes this.

Related

Gatsby's mapping between markdown files

I'm creating a multi-author site (using gatsby-plugin-mdx) and have the following file structure:
/posts
- /post-1/index.mdx
- /post-2/index.mdx
- ...
/members
- /member-a/index.mdx
- /member-b/index.mdx
- ...
In the frontmatter of the post page I have an array of authors like
authors: [Member A, Member B]
and I have the name of the author in the frontmatter of the author's markdown file.
I'd like to set the schema up so that when I query the post, I also get the details of the authors as well (name, email, etc.).
From reading this page it seems like I need to create a custom resolver... but all the examples I see have all the authors in one json file (so you have two collections, MarkdownRemark and AuthorJson... while I think for my case all my posts and members are in MarkdownRemark collection.
Thanks so much!
I end up doing something like this. Surely there's a cleaner way, but it works for me. It goes through all the Mdx and add a field called authors, which is queried, to all Mdx types.
One problem with this is that there's also authors under members, which is not ideal. A better approach is to define new types and change Mdx in the last resolver to your new post data type. Not sure how to get that to work though. At the end, I could query something like:
query MyQuery {
posts {
frontmatter {
title
subtitle
}
authors {
frontmatter {
name
email
}
}
}
}
exports.createResolvers = ({ createResolvers }) => {
const resolvers = {
Mdx: {
authors: {
type: ["Mdx"],
resolve(source, args, context, info) {
return context.nodeModel.runQuery({
query: {
filter: {
fields: {
collection: { eq: "members" }
},
frontmatter: {
memberid: { in: source.frontmatter.authors },
},
},
},
type: "Mdx",
firstOnly: false,
})
}
}
},
}
createResolvers(resolvers)
}

How should I query and match data from the same response in GraphQL with Apollo Client and Link Rest?

I have the following query:
const getPage = gql`
query Page($path: String!) {
page(path: $path) #rest(type: "Page", path: "{args.path}") {
blocks #type(name: Block) {
name
posts #type(name: Post) {
body
author
}
}
authors #type(name: Author) {
name
}
}
}
In blocks.posts.author there's only an AuthorId. The authors object is containing all the available authors.
I'd like to replace/match the AuthorId with it's corresponding object. Is it possible to do this within one query?
I also wouldn't mind to have a separate query for Author only (fetch will be cached, no new request would be made), but I still don't know how would I match it through 2 queries.
Example API response
{
blocks: [
{
posts: [
{
id: 1,
title: 'My post',
author: 12,
}
]
}
],
authors: [
{
id: 12,
name: 'John Doe'
}
]
}
What I want with 1 query that author inside a post becomes the full author object.
Great question. With GraphQL, you have the power to expand any field and select the exact subfields you want from it, so if you were using GraphQL on your backend as well this would be a non-issue. There are some workarounds you can do here:
If all of the Author objects are in your Apollo cache and you have access to each Author's id, you could use ApolloClient.readFragment to access other properties, like this:
const authorId = ...; // the id of the author
const authorInfo = client.readFragment({
id: authorId,
fragment: gql`
fragment AuthorInfo on Author {
id
name
# anything else you want here
}
`,
});
Although it's worth noting that with your original query in the question, if you have all of the Author objects as a property of the query, you could just use Javascript operations to go from Author id to object.
const authorId = ...; // the id of the author
data.page.authors.find(author => author.id === authorId);
The following should work.
First, capture the author id as a variable using the #export directive. Then add a new field with some name other than author and decorate it with the #rest, using the exported variable inside the path.
So the query would look something like this:
query Page($path: String!) {
page(path: $path) #rest(type: "Page", path: "{args.path}") {
blocks #type(name: Block) {
name
posts #type(name: Post) {
body
author #export(as: "authorId")
authorFull #rest(
path: '/authors/{exportVariables.authorId}'
type: 'Author'
) {
name
}
}
}
authors #type(name: Author) {
name
}
}
}
You can use the fieldNameNormalizer option to rename the author property in the response to a field with a different name (for example, authorId). Ideally, that should still work with the above so you can avoid having a weird field name like authorFull but apollo-link-rest is a bit wonky so no promises.

react-apollo resolve missing fields

Let's say I have this books query that return 2 records and stored in local cache.
query Books {
books {
author
title
}
}
'Book:1': {
author: 'Foo',
title: 'Book 1'
}
'Book:2': {
author: 'Bar',
title: 'Book 2'
}
When I have another book query as below to get detail of the book, does react-apollo going to fetch missing fields to server or it will return what ever in the cache for that record? Assuming the default fetchPolicy is used (cache-first)
query Book {
book {
author
title
publisher
publishedAt
}
}
It will query the server to fetch the missing fields.

Generate a json schema without starting a server? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
Is there a standalone tool to convert a modularized graphql schema to a json schema?
I have a graphql server using apollo-graphql and graphql-tools makeExecutableSchema. It follows the pattern described here
// schema.js
import { makeExecutableSchema } form 'graphql-tools';
const Author = `type Author { ... }`;
const Post = `type Post { ... }`;
const Query = `type Query { ... }`;
export const typeDefs = [Author, Post, Query];
export const schema = makeExecutableSchema({
typeDefs: typeDefs,
resolvers: { ... },
});
How can I create a schema.json form either typeDefs or schema?
I need a json schema to use relay-compiler or apollo-codegen. apollo-codegen includes this script to create a schema from a graphql server...
apollo-codegen introspect-schema http://localhost:8080/graphql --output schema.json
...but I want to create the schema, and run apollo-codegen, in an automated build. I don't want to create a server.
I would submit this as an answer, but the question has been marked off-topic ¯\_(ツ)_/¯
The answer from #daniel-rearden pointed me in the correct direction. makeExecutableSchema returns a GraphQLSchema so one can use graphql's printSchema and introspectionQuery to get json or graphql language representations of the schema.
// export.js
import { schema } from './schema.js'
import { graphql, introspectionQuery, printSchema } from 'graphql';
// Save json schema
graphql(schema, introspectionQuery).then(result => {
fs.writeFileSync(
`${yourSchemaPath}.json`,
JSON.stringify(result, null, 2)
);
});
// Save user readable type system shorthand of schema
fs.writeFileSync(
`${yourSchemaPath}.graphql`,
printSchema(schema)
);
There's graphql-to-json. I believe that has a CLI tool to do just that.
Alternatively, you could write your own script and just execute it with node. You don't have to spin up a server to run a query, you just need a schema and you can run a query directly against it. You can check out an example here.

How do I create a mutation that pushes to an array rather than replacing it?

I've been playing with GraphQL recently, and am currently learning about mutations. I'm a bit confused with something. I have a model Post with relation Comments. I have a mutation that looks like this:
mutation addCommentToPost {
updatePost(
id: "POST-1",
comments: [{
body: "Hello!"
}]
) {
id,
comments {
id,
body
}
}
}
The problem is, whenever I run this, it seems to remove all the comments and sets the comments to only the one I just added. To be more specific, how do I write a mutation that pushes to the comments array rather than replacing it?
You are using a mutation called updatePosts, which I assume (based on the name) simply updates a post by replacing the fields that are passed. If you want to use the updatePosts mutation to add a comment, you will first have to query for the post to get the current list of comments, add your comment to the end, and then call updateComment with the entire list of comments (including the one that you just added to the end).
However, this isn't really a good solution, especially if the list of comments is potentially very long. If you have the ability to change the GraphQL server, you should create a new mutation on the server with a signature like addComment(postId: ID, comment: CommentInput). In the resolve function for that mutation, simply add the comment that is passed to the end of the list of current comments.
// resolver for addComment:
addComment(root, args) {
// validate inputs here ...
const post = db.getPost(args.postId);
post.comments.append(args.comment);
db.writePost(post.id, post);
}
db.getPost and db.writePost are functions you have to define yourself to retrieve/write a post from/to wherever you store it.
It's important to note that unlike a SQL or Mongo query, a GraphQL mutation itself doesn't have any meaning without the resolve functions. What the mutation does is defined entirely inside its resolve function. Mutation names and arguments only gain meaning together with the resolve function. It's up to you (or the GraphQL server developers in your company) to write the resolve functions.
The way this situation is currently solved in the Graphcool API is to use a create mutation for the Comment that links to the Post. This is called a nested connect mutation.
This is how it would look like:
mutation {
createComment(
text: "Hello!"
postId: "POST-1"
) {
id
text
post {
comments {
id
}
}
}
}
In the future, other nested arguments like comments_set or comments_push could be introduced, then pushing would be possible like this:
mutation addCommentToPost {
updatePost(
id: "POST-1",
comments_push: [{
body: "Hello!"
}]
) {
id,
comments {
id,
body
}
}
}
Disclosure: I work at Graphcool.
You can use those code as an example for mutation.
module.exports = (refs) => ({
type: refs.commentType,
args: {
id: {
type: GraphQLString
},
body: {
type: GraphQLString
}
},
resolve: (parent, args, root) => {
return createUser(args);
}
});

Resources