Iman Sugirman

Fullstack Developer Experience 6 years, using Laravel and ReactJs

Membuat Blog Dengan React, Apollo Graphql dan Hashnode Api Gratis

23 February 2022
Membuat Blog Dengan React, Apollo Graphql dan Hashnode Api Gratis
Cloud Server Untuk Laravel
Dapatkan Gratis $100 Untuk Deploy Laravel
Deploy Now

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

Cloud Server Untuk Laravel
Dapatkan Gratis $100 Untuk Deploy Laravel
Deploy Now
Subscribe to our newsletter!
Dapatkan Tutorial terbaru dari saya dikirim ke email anda...