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

Question

我正在使用官方的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. 使用路由器：

   导出常量 userQueryVars = { 蛞蝓：router.query.slug， }

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

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

   if (process.browser) { 导出 const userQueryVars = { 蛞蝓：router.query.slug， } }

错误：'import' 和 'export' 可能只出现在顶层。

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

Answer 1

使用getServerSideProps 时，您可以在context.params 中找到您的slug（以及所有其他动态参数，如果有的话）：

export async function getServerSideProps(context) {
  const  { slug } = context.params;

  // Do whatever you need with `slug`
  // ...
}