I had the opportunity to pass params with axios.get method and receive it with Go Gin. I was a little bit in stuck in the process. Therefore, I just leave a note for someone who are in same trouble with me.
In the side of frontend(React&Typescript)
useEffect(() => {
const getCollection = async () => {
setLoading(true);
await axios.get("http://localhost:8000/api/v1/get-id", {
headers: {
"Authorization": `Bearer ${YOUR_TOKEN}`, // if you have access token, you can add it here
"Content-Type": "application/json",
},
params: {
Id: Number(id), // You can pass your any value here with Key and Value pair.
}
})
.then((response) => {
// Whatever you want to write
console.log(response);
})
.catch((error) => {
throw new Error(error);
})
};
getCollection();
}, [])
What I wanted to do was to get the data from DB based on id. Therefore, I needed to pass id value to backend and SQL.
You can add your value you want to pass in params as Key and Value pair besides headers.
await axios.get(“YOUR_API_URL", { Using API with axios get method is available like above. In my case, I set the API as “http://localhost:8000/api/v1/get-id” mentioned it in backend section below.
In the side of backend(Go&Gin)
func main() {
router := gin.Default() ua := "" router.Use(CORSMiddleware()) // middleware
router.Use(func(c *gin.Context) {
ua = c.GetHeader("User-Agent")
c.Next()
}) // Its great to version your API's
v1 := router.Group("/api/v1")
{
v1.GET("/get-id", controllers.GetId)
} // Handle error response when a route is not defined
router.NoRoute(func(c *gin.Context) { // In gin this is how you return a JSON response
c.JSON(404, gin.H{"message": "Not found"}) }) router.Run(":8000")}func CORSMiddleware() gin.HandlerFunc {
return func(c *gin.Context) {
c.Header("Access-Control-Allow-Origin", "*")
c.Header("Access-Control-Allow-Credentials", "true")
c.Header("Access-Control-Allow-Headers", "Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, accept, origin, Cache-Control, X-Requested-With")
c.Header("Access-Control-Allow-Methods", "POST,HEAD,PATCH, OPTIONS, GET, PUT")
if c.Request.Method == "OPTIONS" {
c.AbortWithStatus(204)
return
}
c.Next()
}
}func GetId(c *gin.Context) {
id := c.Query("Id")
fmt.Println(id) // Display id backend receives from frontend db, err := db.ConnectDB() // ConnectDB() is the function to connect to my DB which is not mentioned in this article.
if err != nil {
return
} sqlStatement := `SELECT * FROM user_collection WHERE id=?;`
// pass id received from frontend and make the query
rows, err := db.Query(sqlStatement, id)
if err != nil {
return
}
}
The function GetId makes query to DB based on id which frontend passed.
id := c.Query(“Id”)If you are using GO & Gin framework, the params can be obtained like above.(“Id”) is the Key set in frontend.
The function CORSMiddleware() is not relevant to this article theme, however, I just left a note for some trouble. Adding the process of CORS would be helpful to make the API router.
Happy coding!
