使用 GraphQL 在 React.Js 中渲染動態頁面

Question

我一直在嘗試建立博客，我不知道如何從 GraphQL API 獲取特定數據到動態頁面。

我嘗試構建的內容：

有一個名為 /blog 的頁面，其中包含多個卡片組件。 每張卡片由一張圖片、一個標題和一個發布日期組成。 這些卡片中的每一個都是一篇博客文章。 當用戶嘗試單擊博客文章時，它會單擊卡片並被帶到/blog/posts/ slug here之類的頁面。 到目前為止，一切都很好。

問題：

我不知道如何使頁面動態化並從已點擊的博客文章中獲取特定數據到可以是動態的頁面。 我想我需要在 React.Js 中使用 useParams 或類似的東西，但我不知道如何獲取被點擊的特定帖子。 我只能得到他們所有。

編碼：

1） /blog 頁面（我在其中獲取所有帖子 - 這工作正常）：

 import React from 'react'; import './Blog.styles.scss'; import {GraphQLClient, gql} from 'graphql-request'; import { useState } from 'react'; import { useEffect } from 'react'; import {Link} from 'react-router-dom'; const graphcms = new GraphQLClient('https://api-eu-central-1.hygraph.com/v2/cl66hwcamapj001t76qqlhkl8/master'); const QUERY = gql` { posts { id, title, datePublished, slug, content{ html }, coverPhoto{ url } } } `; const Blog = () => { const [posts, setPosts] = useState([]); useEffect(() => { const getPosts = async () => { const {posts} = await graphcms.request(QUERY); setPosts(posts); } getPosts(); }, []) return ( <div className='blog-container'> <div className='posts-wrapper'> {posts && posts.map((post) => ( <div className='blog-card'> <Link to={'/posts/' + post.slug}> <div className='blog-card-img-container'> {post.coverPhoto && <img src={post.coverPhoto.url} alt='blog-card-cover-img'/>} </div> <div className='blog-card-title-container'> <h1 className='blog-card-title'>{post.title}</h1> </div> </Link> </div> ))} </div> </div> ) } export default Blog

2) 應該只顯示之前點擊過的帖子的動態頁面 ->

 import React, { useState } from 'react'; import { useEffect } from 'react'; import { useParams } from 'react-router-dom'; import {GraphQLClient, gql} from 'graphql-request'; const graphcms = new GraphQLClient('https://api-eu-central-1.hygraph.com/v2/cl66hwcamapj001t76qqlhkl8/master'); const QUERY = gql` query Post($slug: String:) { post(where: {slug, $slug}) { id, title, slug, datePublished; content{ html } coverPhoto{ url } } } `; // const SLUGLIST = gql` // { // posts { // slug // } // } // `; const BlogPost = () => { const {slug} = useParams(), const [postData; setPostData] = useState({}). useEffect(() => { const getPost = async () => { // const slugs = await graphcms;request(SLUGLIST). const data = await graphcms;request(QUERY); setPostData(data); } getPost(), }. [slug]) useEffect(() => { console;log(postData), }, [postData; slug]) return ( <div>BlogPost</div> ) } export default BlogPost

3) 路線頁面：

 function App() { return ( <Routes> <Route path='/' element={<Navbar />}> <Route index element={<Homepage />}/> <Route path='/despre-noi' element={<DespreNoi />} /> <Route path='/galerie' element={<Galerie />}/> <Route path='/contact' element={<Contact />} /> <Route path='/blog' element={<Blog />} /> <Route path='/animatori' element={<Animatori />} /> <Route path='/ursitoare' element={<Ursitoare />} /> <Route path='/oglinda-magica' element={<OglindaMagica />} /> <Route path='/loc-de-joaca' element={<LocDeJoaca />} /> <Route path='/posts/*' element={<BlogPost />} /> </Route> </Routes> ) } export default App;

注意：我知道 styles 並且一切都還沒有完善，我只是想讓它工作。 任何幫助將不勝感激謝謝

Answer 1

實際上無法運行您的示例以完全了解發生了什么，但我確實注意到了以下兩件事：

1）。 您想設置要基於的路線，以便您可以從 url 中獲取帖子 ID/slug。 在 react-router 中，這可以使用path=":id"語法來完成。

<Route path="posts" >
  <Route path=":slug" element={<BlogPost />} />
</Route>

https://reactrouter.com/docs/en/v6/components/route

2）。 Graphql 請求需要將 slug 作為變量發送。 query Post($slug: String )期望將 slug 作為變量提供。

const variables = {
    slug: slug
}

const data = await graphcms.request(QUERY, variables);

示例： https://github.com/prisma-labs/graphql-request#using-graphql-document-variables