Membuat Blog Dengan React, Apollo Graphql dan Hashnode Api Gratis

Hashnode memiliki api untuk bisa diakses sepenuhnya oleh blogger seperti saya, dan saya sangat menikmatinya ketika ngeblog menggunakan Hashnode jika teman-teman ingin menggunakan atau ingin bermain-main dengan api hashnode silahkan buka Playground Api Hashnode dan sekarang kita coba query postingan kita :

query GetPosts {
  user(username: "xxxxxx") {
    photo
    name
    socialMedia {
      twitter
      linkedin
    }
    publication {
      posts(page: 2) {
        _id
        coverImage
        slug
        title
        brief
        cuid
      }
    }
  }
}

Maka nanti akan menghasilkan output seperti ini :

{
  "data": {
    "user": {
      "publication": {
        "posts": [
          {
            "_id": "61dbd4cab0c3ca3df9b47b62",
            "title": "Tutorial Deploy Aplikasi Laravel Secara Otomatis Dengan Deployer di Ubuntu 16.04"
          },
          {
            "_id": "61dbd4b2cda0d0294b699b19",
            "title": "Menggunakan Select2 Ajax Depends di Laravel"
          },
          {
            "_id": "61dbd4b5b0c3ca3df9b47b49",
            "title": "Optimasi Docker untuk Production"
          },
          {
            "_id": "61dbd498cda0d0294b699aee",
            "title": "Tutorial Laravel Upload dengan Package ImageUp"
          },
          {
            "_id": "61dbd495b0c3ca3df9b47b28",
            "title": "Setup Laravel di Macbook dengan Valet"
          }
        ]
      }
    }
  }
}

Baik sekarang kita install CRA dengan cara memasukan

npx create-react-app my-app

Lalu install @apollo/client dan graphql di project React kita :

yarn add @apollo/client graphql

Buat Page Home disini saya menggunakan JSX saya buat file di src/views/Home.jsx

const Home = () => {
    const [posts, setPosts] = useState([]);
    const [loading, setLoading] = useState(false)
    const [author, setAuthor] = useState({})

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

        const { data } = await client.query({
            query: gql`
              query GetPosts {
                user(username: "nakamuraagatha") {
                    name
                    photo
                    numPosts
                    socialMedia {
                        twitter
                        linkedin
                    }
                    publication {
                        posts(page: ${pageql} ) {
                        _id
                        coverImage
                        slug
                        title
                        brief
                        }
                    }
                }
              }
            `,
          })
          setPosts(data.user.publication.posts);
          setAuthor({
            logo: data.user.photo,
            name: data.user.name,
            twitter: data.user.socialMedia.twitter,
            linkedin: data.user.socialMedia.linkedin,
        })
    }

dan jangan lupa gunakan useEffect

useEffect(() => {
  blogFetch();
}, []);

dan sekarang kita bisa loop

{
  posts.map((post, index) => {
    <div key={index}>
      <h1>{post.title}</h1>
    </div>;
  });
}

Lalu Sekarang kita buat Detail Blognya dengan nama file BlogDetail.jsx dan diantara kedua komponent ini akan dihubungkan dengan react-router dan kita harus menginstallnya

yarn add react-router-dom@6

saya menggunakan react router versi terbaru agar lebih update, sekarang kita atur route nya di App.jsx biar nanti saling berhubungan

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import BlogDetail from './views/BlogDetail';
import Home from './views/Home';
const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path=":slug" element={<BlogDetail />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

Dan sekarang kita ke file Home.jsx kembali untuk menghubungkan link ke BlogDetail.jsx seperti dibawah

import { Link } from 'react-router-dom';

<Link to={`${post.slug}`}>Read More</Link>;

dan Kita benahi BlogDetail.jsx untuk menangkap parameter yang diberikan di Home.jsx tadi menggunakan component Link dari react-router-dom silahkan ubah menjadi

const BlogDetail = () => {
    const [post, setPost] = useState({})
    const params = useParams()
    const slug = params.slug.toString()

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

            const { data } = await client.query({
                query: gql`
                  query PostDetail {
                    post (slug: "${slug}", hostname: "usernamekamu.hashnode.dev") {
                        title
                        dateAdded
                        coverImage

                        contentMarkdown
                    }
                  }
                `,
              })
              setPost(data.post)
}

Nah sekarang sudah bisa ngeblog dengan Reactjs dan Backend Menggunakan Hashnode,

untuk hasilnya teman-teman bisa langsung cek Blog saya ImanSugirman.com

Terimakasih Hashnode, saya sangat menyukainya...