I decided to replicate reddit using Next.js and incorporating stepzen for graphql integration. I have successfully directed it to a specific page based on the slug, but unfortunately, I am facing an issue with retrieving the post information.
import { useQuery } from "@apollo/client";
import { useRouter } from "next/router";
import React from "react";
import Post from "../../../components/Post";
import { GET_POST_LIST_BY_TITLE } from "../../../graphql/queries";
const PostPage = () => {
const router = useRouter();
const { data, error } = useQuery(GET_POST_LIST_BY_TITLE, {
variables: {
id: router.query.id as string,
},
});
if (error) {
return <div>Error! {error.message}</div>;
}
const post: Post = data?.getPostListByPostTitle;
console.log(data);
return (
<div>
<Post post={post} />
</div>
);
};
export default PostPage;
getPostListByPostTitle(title: String!): [Post]
@dbquery(
type: "postgresql"
query: """
select * from "post" where title = $1
"""
configuration: "postgresql_config"
)
gql query
export const GET_POST_LIST_BY_TITLE = gql`
query a($title: String!) {
getPostListByPostTitle(title: $title) {
id
title
username
body
created_at
image
subreddit {
created_at
id
topic
}
subreddit_id
comments {
created_at
id
text
}
votes {
created_at
upvote
username
post_id
id
}
}
}
`;
Error! Variable '$title' of required type 'String!' was not provided.Upon further investigation, I found that the console log output is showing undefined.
Despite my attempts at implementing server-side rendering, I have been unable to resolve this issue so far.