Hashnode은 튜토리얼, 개발자 기사 및 뉴스를 가장 먼저 볼 수 있는 곳 중 하나입니다. API를 사용하는 것이 지금까지 할 수 있는 가장 멋진 일이라는 것은 의심의 여지가 없습니다.

If you haven't created an account with Hashnode, don't hesitate to do so

데모 및 소스 코드

https://github.com/ChrisAchinga/hashnode-api

https://hashnode-api-self.vercel.app/

코딩하자

이 기사에서는 Next JS 웹 사이트에서 hashnode의 블로그 기사 표시를 안내합니다.

그러기 위해서는 다음 사항을 확인해야 합니다.

해시노드 계정

노드JS

텍스트 편집기(비주얼 스튜디오 코드)

NextJS에서 데이터 쿼리를 돕기 위해 Apollo graphQL을 사용하겠습니다.

해시노드 API

Hashnode API는 graphQL을 사용했습니다. 데이터를 가져오는 데 있어서 예쁘고 빠릅니다.

Hashnode API Playground

데이터 가져오기 쿼리에 대한 자세한 내용은 브라우저 오른쪽의 문서 서랍에서 찾을 수 있습니다.

블로그 게시물 게시를 가져오기 위한 몇 가지 쿼리를 테스트해 보겠습니다.

{
  user(username: "chrisdevcode") {
    publication {
      posts(page: 0) {
        _id
        coverImage
        slug
        title
        brief
        dateAdded
        dateUpdated
      }
    }
  }
}

chrisdevcode를 해시노드 사용자 이름으로 변경합니다.

user(username: "hashnode_user_name")

게시 쿼리 개체에서 페이지 번호를 지정해야 합니다. 0은 누군가가 블로그 홈을 방문할 때 가장 먼저 로드되는 페이지입니다. 즉, 가장 최근 기사가 표시되는 페이지입니다.

 publication {
      posts(page: 0) {
       //
      }
    }

플레이그라운드로 돌아가 쿼리를 붙여넣고 실행합니다.

{
  user(username: "chrisdevcode") {
    publication {
      posts(page: 0) {
        _id
        coverImage
        slug
        title
        brief
        dateAdded
        dateUpdated
      }
    }
  }
}

가져온 데이터:

{
  "data": {
    "user": {
      "publication": {
        "posts": [
          {
            "_id": "60c313ef1e145957d5af691a",
            "coverImage": "https://cdn.hashnode.com/res/hashnode/image/upload/v1623247532659/tqLf2R120.png",
            "slug": "using-markdown-in-hashnode-beginners-guide",
            "title": "Using Markdown In Hashnode: Beginners Guide",
            "brief": "Hashnode is by far my best Developer blogging platform. One of the things making me love it is the use of markdown in writing and editing articles. \nIf you just created a Hashnode blog or thinking of creating one, then this is the best article for yo...",
            "dateAdded": "2021-06-11T07:42:39.715Z",
            "dateUpdated": null
          }
        ]
      }
    }
  }
}

이제 다음 웹사이트/앱에서 이 작업을 수행해 보겠습니다.

다음 앱

다음 앱 만들기:

터미널/CMD를 열고 다음 앱을 만듭니다.

npx create-next-app hashnode-api

Apollo 및 GraphQL 설치

npm install @apollo/client graphql

애플리케이션을 테스트합니다.

npm run dev

브라우저를 열고 다음으로 이동합니다. http://localhost:3000/

We will only edit one file for the purpose of demonstration i.e index.js

인덱스 파일pages/index.js을 열고 코드를 다음과 같이 정리합니다.

export default function Home() {
  return (
    <div>
      <h1>My Hashnode Articles</h1>
    </div>
  )
}

Follow this commit

데이터를 가져 오는 중

graphQL을 사용하여 해시노드 API에서 데이터를 가져오기 위해 타사를 사용할 것입니다.

NextJS는 기본 제공 데이터 가져오기 방법을 제공합니다. 저는 getStaticProps를 사용하겠습니다. "

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

https://nextjs.org/docs/basic-features/data-fetching

현재 파일에서 파일 맨 아래에 getStaticProps()를 추가합니다.

export default function Home() {
  return (
    <div>
      <h1>My Hashnode Articles</h1>
    </div>
  )
}

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

getStaticProps 함수 내에서 우리는 궁극적으로 페이지에 props를 반환할 것입니다. 이 경우 게시물을 반환하므로 props는 posts가 됩니다.

export async function getStaticProps(context) {
  return {
    props: {
      posts: []
    }, 
  }
}

페이지에 소품으로 posts를 전달합니다.

export default function Home({ posts }) {
  return (
    <div>
      <h1>My Hashnode Articles</h1>
    </div>
  )
}

콘솔에 소품을 로그인하여 결과를 테스트할 수 있습니다.

console.log('POSTS', posts)

지금 우리의 파일:

export default function Home({ posts }) {
  console.log('POSTS', posts)
  return (
    <div>
      <h1>My Hashnode Articles</h1>
    </div>
  )
}

export async function getStaticProps(context) {
  return {
    props: {
      posts: [],
    },
  }
}

웹 콘솔을 열면 다음과 같이 표시됩니다.

Follow along with commit

GraphQL로 가져오기 및 쿼리

이제 모든 것이 설정되었으므로 해시노드 API에서 편안하게 데이터를 가져올 수 있습니다.

먼저 apollo 클라이언트를 가져옵니다.

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

우리는 GraphQL 쿼리를 생성하는 데 사용될 gql 및 캐시에서 아폴로 읽기를 최적화하는 Apollo 클라이언트 및 InMemoryCache를 가져오고 있습니다.

getStaticProps() 함수 상단에서 Hashnode API 끝점을 사용하여 apollo 인스턴스를 생성해 보겠습니다.

  const client = new ApolloClient({
    uri: 'https://api.hashnode.com/',
    cache: new InMemoryCache(),
  })

getStaticProps() 함수는 이제 다음과 같아야 합니다.

export async function getStaticProps(context) {
  const client = new ApolloClient({
    uri: 'https://api.hashnode.com/',
    cache: new InMemoryCache(),
  })

  return {
    props: {
      posts: [],
    },
  }
}

이제 쿼리를 만들어 보겠습니다. 쿼리 구문은 다음과 같습니다.

const { data } = await client.query({
  query: gql`
    query GetPosts {
      // write query here
    }
  `,
})

API 플레이그라운드에서 쿼리를 가져옵니다.

const { data } = await client.query({
    query: gql`
      query GetPosts {
        user(username: "chrisdevcode") {
          publication {
            posts(page: 0) {
              _id
              coverImage
              slug
              title
              brief
            }
          }
        }
      }
    `,
  })

그런 다음 getStaticProp()의 소품에 데이터를 추가합니다.

return {
    props: {
      posts: data.user.publication.posts,
    },
  }

You can just pass in data, but I have the long tree in the array, so I just used data.user.publication.posts, either way, you'll get the same results.

서버가 계속 실행 중인 상태에서 웹 콘솔을 간단히 살펴보겠습니다.

여기요! 터미널도 확인하십시오.

업데이트된 전체 파일:

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

export default function Home({ posts }) {
  console.log('POSTS', posts)
  return (
    <div>
      <h1>My Hashnode Articles</h1>
    </div>
  )
}

export async function getStaticProps(context) {
  const client = new ApolloClient({
    uri: 'https://api.hashnode.com/',
    cache: new InMemoryCache(),
  })

  const { data } = await client.query({
    query: gql`
      query GetPosts {
        user(username: "chrisdevcode") {
          publication {
            posts(page: 0) {
              _id
              coverImage
              slug
              title
              brief
            }
          }
        }
      }
    `,
  })

  return {
    props: {
      posts: data.user.publication.posts,
    },
  }
}

Follow along with commit

웹페이지에 데이터 추가:

마지막 부분:

API에서 게시물을 표시하기 위해 데이터를 통해 매핑하고 각 게시물을 표시하기만 하면 됩니다.

{posts.map((post) => {
  return (
    // output here
  )
})}

데이터를 반복하고 모든 게시물에 대해 전체 게시물에 대한 제목과 링크를 표시합니다.

{posts.map((post) => {
        return (
          <div key={post._id}>
            <h1>{post.title}</h1>
            <a href={`https://chrisdevcode.hashnode.dev/${post.slug}`}>Read</a>
          </div>
        )
})}

따라서 전체 파일:

import { ApolloClient, InMemoryCache, gql } from '@apollo/client'

export default function Home({ posts }) {
  console.log('POSTS', posts)
  return (
    <div>
      <h1>My Hashnode Articles</h1>

      {posts.map((post) => {
        return (
          <div key={post._id}>
            <h2>{post.title}</h2>
            <a href={`https://chrisdevcode.hashnode.dev/${post.slug}`}>Read</a>
          </div>
        )
      })}
    </div>
  )
}

export async function getStaticProps(context) {
  const client = new ApolloClient({
    uri: 'https://api.hashnode.com/',
    cache: new InMemoryCache(),
  })

  const { data } = await client.query({
    query: gql`
      query GetPosts {
        user(username: "chrisdevcode") {
          publication {
            posts(page: 0) {
              _id
              coverImage
              slug
              title
              brief
            }
          }
        }
      }
    `,
  })

  return {
    props: {
      posts: data.user.publication.posts,
    },
  }
}

이제 게시물이 웹페이지에 표시됩니다.

원샷의 모든 것!

결론

아래 링크에서 데모와 소스 코드를 볼 수 있습니다.

https://github.com/ChrisAchinga/hashnode-api

https://hashnode-api-self.vercel.app/

Thanks to Colby Fayock who wrote an article on using graphQL on NextJS, and Catalin Pit on How on use hashnode API

Reference

이 문제에 관하여(NextJS 앱에서 Hashnode API 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/chrisachinga/using-hashnode-api-in-a-nextjs-app-5fli

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

NextJS 앱에서 Hashnode API 사용