Nextjs - 在服务器端访问 url 参数

如何解决Nextjs - 在服务器端访问 url 参数

我正在使用官方 with-apollo 示例来创建 nextjs 前端。我正在尝试使用用户的 slug，可以在 url 字符串中找到它来呈现用户配置文件。但是，我无法在 graphql 查询中使用 url 参数（slug）作为变量。

指向用户个人资料的链接

<Link href={{ pathname: "/users/[slug]",query: { slug: user.slug } }}>

用户配置文件组件

import { gql,useQuery } from "@apollo/client"
import ErrorMessage from "./ErrorMessage"
import { useRouter } from "next/router";

export const USER_QUERY = gql`
  query getUser($slug: String!) {
    user(slug: $slug) {
      id
      email
    }
  }
`

// I can not get this to work using url parameters
export const userQueryVars = {
  slug: "userSlug",// This should be a url parameter!!
}

export default function UserProfile() {
    const router = useRouter()
    const userSlug = router.query.slug

  const { loading,error,data } = useQuery(USER_QUERY,{
    variables: {slug: userSlug},})

  if (error) return <ErrorMessage message="Error loading users." />
  if (loading) return <div>Loading</div>
  if (!data) return <div>No data</div>

  const { user } = data

  return (
    <section>
      <div>
        <h3>
          {user.firstName} {user.lastName}
        </h3>
        <p>{user.email}</p>
      </div>
    </section>
  )
}

用户个人资料页面

import App from "../../../components/App"
import Header from "../../../components/Header"
import UserProfile,{
  USER_QUERY,userQueryVars,} from "../../../components/UserProfile"
import { initializeApollo,addApolloState } from "../../../lib/apolloClient"

const UserProfilePage = () => (
  <App>
    <Header />
    <UserProfile />
  </App>
)

export async function getServerSideProps() {
  const apolloClient = initializeApollo()

  await apolloClient.query({
    query: USER_QUERY,variables: userQueryVars,// This is passed from the component!
  })

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

export default UserProfilePage

---

到目前为止我尝试过的东西（以及很多其他的东西）：

1. 使用路由器：

   导出 const userQueryVars = { slug: router.query.slug,}

错误：您应该只在应用的客户端内使用“next/router”。

2. 使用路由器并检查它是否在客户端调用：

   if (process.browser) { 导出 const userQueryVars = { slug: router.query.slug,} }

错误：“导入”和“导出”可能只出现在顶层。

我会非常感谢任何形式的帮助！！

解决方法

使用 { modules: [ 'nuxt-i18n',],} 时，您可以在 getServerSideProps 中找到您的 slug（以及所有其他动态参数，如果有的话）：

context.params