动态路由上的 SSR 遵循 with-apollo 示例和 `getServerSideProps`

如何解决动态路由上的 SSR 遵循 with-apollo 示例和 `getServerSideProps`

我正在关注 with-apollo 示例。我正在尝试使用 Dynamic Routes 和 getServerSideProps 为帖子制作单独的页面。

这是我想出来的，但我不确定这是否是最好的方法。我以为 useQuery 仅适用于 getStaticProps。

// pages/post/[id].js
import App from '../../components/App'
import Header from '../../components/Header'
import { gql,useQuery } from '@apollo/client'
import { initializeApollo,addApolloState } from '../../lib/apolloClient'

const POST = gql`
  query POST($id: String!) {
    Post(id: $id) {
      title
    }
  }
`;

const SSRPage = ({ id }) => {
  const { data,loading,error } = useQuery(POST,{ variables: { id } })
  const { Post } = data
  return(
  <App>
    <Header />
    <h1>{Post.title}</h1>
  </App>
)}

export async function getServerSideProps({params}) {
  const { id } = params;
  const apolloClient = initializeApollo()

  await apolloClient.query({
    query: POST,variables: { id }
  })

  return addApolloState(apolloClient,{
    props: { id },})
}

export default SSRPage

这一切都在 Apollo 3 和 Next.js 10 中