Create fetching review in reactjs web năm 2024

I'm constantly improving my websites as well as my client's sites adding new features and information. Last week I focused on integrating google reviews with a static website written in react. Here's a little guide on how to do it on your own.

Google APIs

When I was researching ways to add google reviews to Clean Commit's website I first wanted to load the reviews for each website visitor using JS on the front end. Unfortunately that's impossible.

Which API to use for Google My Business reviews?

I came across 2 API's that can potentially load reviews from Google Maps business location - Google My Business API and Google Places API. The former requires a sing up and confirmation on how you'll use it. Unfortunately, it requires an additional layer of authorization and is mostly meant for applications that manage google business pages. After waiting for confirmation and testing this API I finally gave up and turned to Places API. Unfortunately, Places API only loads 5 reviews, but from what I gathered these 5 reviews randomly order (which is great for our implementation approach).

Prerequisites

Before we start this little project we'll need a couple of things beforehand:

1. Sign up for Google Cloud Platform and create a new project
2. Activate Places API
3. Find your business location ID

First, two steps are straight forward, just follow the links provided. The last one is a bit trickier but fortunately, we can use Place IDs Finder, just types in your business name and you'll find the ID you're looking for.

How to handle Google Business reviews import?

Now we're ready to try out Places API. Our calls will be directed at the following URL:

https://maps.googleapis.com/maps/api/place/details/json?placeid=[PLACE_ID]&key=[API_KEY]

The output will look something like that:

{
   "html_attributions": [],
   "result": {
      "address_components": [...],
      "adr_address": "...",
      "business_status": "...",
      "formatted_address": "...",
      "formatted_phone_number": "...",
      "geometry": {},
      "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/generic_business-71.png",
      "id": "...",
      "international_phone_number": "...",
      "name": "...",
      "opening_hours": {...},
      "photos": [...],
      "place_id": "...",
      "plus_code": {...},
      "rating": 5,
      "reference": "...",
      "reviews": [...],
      "scope": "GOOGLE",
      "types": [...],
      "url": "https://maps.google.com/?cid=12209819992465647813",
      "user_ratings_total": 4,
      "utc_offset": 600,
      "vicinity": "13/7 Ijong Street, Braddon",
      "website": "https://cleancommit.io/"
   },
   "status": "OK"
}

The only problem with our calls to the API is that calling it from the front end will result in errors. Additionally, we only have 5 reviews returned each time.

I'm using React Static on that particular website, but it can also be done with Gatsby.

The way I decided to solve this issue is to call the API on each build and save reviews data in markdown file that will be used to create a static website and work with Netlify CMS.

const fs = require('fs')
const klaw = require('klaw')
const path = require('path')
const matter = require('gray-matter')
const axios = require('axios');
const yaml = require('js-yaml');
...
function getGoogleReviews() {
  console.log('=> Fetching reviews data..')
  return new Promise((resolve, reject) => {
    let reviews;
    const url = 'https://maps.googleapis.com/maps/api/place/details/json?placeid=[PLACE_ID]&key=[API_KEY]';
    axios.get(url)
    .then(res => {
      console.log('=> Reviews data fetched!')
      console.log(res.data)
      if(res.data.status == 'OK') {
        console.log('=> Saving new reviews to markdown..')
        let today = new Date('now');
        reviews = res.data.result.reviews
        // Converting reviews to netlify format
        reviews.forEach(item => {
          let content = {
            image: item.profile_photo_url,
            title: item.author_name,
            link: '',
            company: '',
            testimonial: item.text,
            rating: item.rating,
            promted: false,
            google: true,
          }
          content = yaml.safeDump(content, {delims: true})
          content = `---\n${content}\n---`
          let path = `./content/testimonials/${slugify(item.author_name)}.md`
          if (!fs.existsSync(path)) {
            fs.writeFile(path, content, err => {
              if (err) {
                console.error(err)
                return
              }
            })
          }
        })
      }
      resolve(reviews)
    })
  })
}

The function above will fetch reviews and save them in ./content/testimonials saving the file as an authors name, only saving the testimonials that are not already existing.

How do I create a fetch request in react JS?

Different Ways to Fetch Data in React.

Use the stale-while-revalidate (SWR) method. This method is used to fetch data from a server and is used in React. ... .

Use the JavaScript Fetch() method. ... .

Use the React Query library. ... .

Use the Axios Library. ... .

Use the useFetch custom hook from react-fetch-hook..

How do I fetch data from a URL in React?

Let's go step by step..

Step 1: Create a New React Component. First, we need a place to display the fetched data. ... .

Step 2: Use the Fetch API to Get Data. Now, let's use the Fetch API to get data from a URL. ... .

Step 3: Display the Fetched Data. After fetching the data, we need to display it..

How do you fetch data before render in React?

Fetching data in React can be done using the useEffect hook. Here's a simple example: 1import React, { useState, useEffect } from 'react'; 2 3const MyComponent = () => { 4 const [data, setData] = useState(null); 5 6 useEffect(() => { 7 fetch('/api/data') 8 . then(response => response.

What is suspense in client component?

"Suspense" is generally used to refer to a new way of building React apps using the concurrent rendering engine introduced in React 18. It's also a specific React API, , a component that lets you display a fallback until its children have finished loading.