use query params to chose contentful client

src/pages/blog/[...slug]/index.tsx → src/pages/blog/[slug]/index.tsx

@@ -17,19 +17,22 @@ const fetchDraftContent = async (slug: string, isPreview: boolean) => {
 
 const Page = () => {
   const router = useRouter()
-  const { slug, secret } = router.query as { slug: string; secret: string }
-  const [blogPost, setBlogPost] = useState<BlogPostEntry | null>(null)
+  const { query, isReady } = router
+  const [isPreview, setIsPreview] = useState<boolean>(false)
 
-  const isPreview = Array.isArray(slug) && slug.includes('preview')
-  const postSlug = Array.isArray(slug) ? slug[0] : slug
+  const { slug, secret } = query as { slug: string; secret: string }
+  const [blogPost, setBlogPost] = useState<BlogPostEntry | null>(null)
 
   useEffect(() => {
-    if (postSlug) {
-      fetchDraftContent(postSlug, isPreview).then((content) => {
+    if (slug && isReady) {
+      const isSecretValid = secret === process.env.NEXT_PUBLIC_CONTENTFUL_PREVIEW_SECRET
+      setIsPreview(isSecretValid)
+
+      fetchDraftContent(slug, isSecretValid).then((content) => {
         setBlogPost(content)
       })
     }
-  }, [secret, postSlug, isPreview])
+  }, [isReady, secret, slug])
 
   return blogPost ? <BlogPost blogPost={blogPost} isPreview={isPreview} /> : <div>Loading...</div>
 }