Nextjs sayfamda Google Maps API kullanarak harita sayfası yarattım. Ancak bu verinin component kısmından yüklenmesini istedim. NextJS sayfamı SSR kısmında hazırlar durumdayken component sayfam harita yüklemeye çalışıyor. component sayfamda aktarabildiğim props değişkeni

router.query.hotelslug

import { useRouter } from 'next/router'
function MarkergoogleMap() {
const router = useRouter()
}

slug verisi ile hedefim mongodb api verisine ulaşmak olması gerekiyordu. Yalıkavak Restaurants Map

Nextjs ile gelen ExpressJS api klasörüne istediğiniz modeli oluşturabilirsiniz. Api dokümanına ait klasör yapısı aşağıdaki şekilde /restaurantdetail/[restaurant].js gelişti.

import { MongoClient } from "mongodb";

export default async (req, res, result) => {
  MongoClient.connect(
    "mongodb+srv://connectstringmongodb?retryWrites=true&w=majority",
    { useNewUrlParser: true, useUnifiedTopology: true },
    function (err, client) {
      if (err) throw err;

      const db = client.db("restaurant");

      db.collection("restaurant")
      .find({ slug: { $eq: req.query['restaurant']} })
        .toArray(function (err, result) {
          if (err) throw err;


          return res.status(200).json( result)
        });
    }
  );

};

yalikavak.bodrum.work/api/restaurantdetail/.. adresinden dilediğim mongodb documet slug keywords üzerinden çekilebiliyor.

[{"_id":"5fd116592ddff7707dceb81c","name":"Sait Restaurant","mahalle":"YALIKAVAK","slug":"sait-restaurant","restauranttypesslug":"fine-dining-restaurant","placeid":"ChIJm6aS3GlxvhQRFvn-6AKya34","lat":37.1035175,"lng":27.28329029999999}]

İşler burada karışmaya başladı. Karşılaştığım ilk sorun component sayfasında nextjs data fetching modülleri çalışmadı.

component sayfasına nasıl data fetching yaparım diye düşünürken React için geliştirilen ama default nextjs tarafından desteklenmiş kütüphane Use SWR ile tanıştım.

import useSWR from 'swr'
function MarkergoogleMap() {
  const fetcher = url => fetch(url).then(r => r.json())
  const router = useRouter()


  const { data: restaurants} = useSWR(`/api/restaurantdetail/${(router.query.restaurant)}`,fetcher); 

  if (!restaurants) return <div>loading...</div>
return (
<GoogleMap></GoogleMap>)}

graphql axios ve fetch şeklinde üç ayrı şekilde kullanılabiliyor. graphql dikkatimi çekti ancak query post olduğu için cors problemini aşamadım. çünkü endpoint prismic.io graphql aparatı olarak ayarlanmıştı.

SWR ile component sayfaasında router.query ile veri çekmeyi başardım.

Prismic.io ile component sayfasına nasıl verigetirebilirim?

Hotel verileri prsimic headless cms üzerinde tutuluyor. yine limdeki tek veri bir önceki örnekte olduğu gibi

router.query.hotelslug

hotel detay sayfasında headlesscms verisini ilk önce graphql kullanarak çözmeye çalıştım.

Karşıma cors problemi çıktı çünkü graphql sorgusu pos olarak gönderiyor. prismic size hazır graphql sorgu ekranı oluşturuyor. Nextjs sayfalarımda graphql sorgusu kullanmak bence yüklenme hızında gözle görünür bir iyileştirme sağlayacaktır. Bu konuyu bir sonraki yazıda incelemek gerekiyor.