How to get Article posts (blog posts)

[brickandcanvas]

Hi everyone.

I am working on creating a template to be reused for shopify websites, and everything seems great, and all.

I already have access to the article collection on the homepage, but I don't know how to get the full article using the article slug.

Here is my code. for blog/[handle].server.jsx

`import {
MediaFileFragment,
ProductProviderFragment,
useShopQuery,
flattenConnection,
RawHtml,
} from '@shopify/hydrogen';
import {useParams} from 'react-router-dom';
import gql from 'graphql-tag';
import NotFound from '../../components/NotFound.server';
import { ImageFragment } from '@shopify/hydrogen/dist/esnext/components/Image';

export default function Product({country = {isoCode: 'US'}}) {
const {handle} = useParams();

const {data} = useShopQuery({
  query: BLOGPOST,
  variables: {
    country: country.isoCode,
    handle,
  },
});

if (!data.articles) {
  return <NotFound />;
}

return (
    <div>
    </div>
);

}

const BLOGPOST = gql`
query indexContent(
$country: CountryCode
) @incontext(country: $country) {
articles(first: 3) {
edges {
node {
title
id
excerptHtml
handle
image{
...ImageFragment
}
}
}
}
}

${ImageFragment}
;

[frandiox]

@brickandcanvas Hi! I'm not very familiar with the API but have you tried Blogs.articleByHandle? You can test it in the Graphiql tool with the following query:

{
  shop {
    blogs(first: 1) {
      edges {
        node {
          articleByHandle(handle: "127283971-first-post") {
            content
          }
        }
      }
    }
  }
}

Update

Better query posted by @scottdixon on Discord:

query {
  blog(handle: "blog-handle") {
    articleByHandle(handle: "article-handle") {
      id
    }
  }
}

Example code:

export default function Article() {
  const {handle} = useParams();
  const {data} = useShopQuery({query: QUERY, variables: {handle}});

  return (
    <Layout>
      <h1 className="text-2xl font-bold">{data.blog.articleByHandle.title}</h1>
    </Layout>
  );
}

const QUERY = gql`
  query Blogs($handle: String!) {
    blog(handle: "news") {
      articleByHandle(handle: $handle) {
        title
      }
    }
  }
`;