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...