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

Posted 2023-02-22

【中文标题】Nextjs - 在服务器端访问 url 参数

【英文标题】：Nextjs - access url params on server side

【发布时间】：2021-10-01 17:35:47

【问题描述】：

我正在使用官方的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

---

到目前为止我所做的尝试（以及许多其他事情）：

使用路由器：

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

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

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

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

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

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

【问题讨论】：

如果您的问题已得到解答，请确保接受答案以供进一步参考。

【参考方案1】：

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

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

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

【讨论】：

感激不尽！！正是我正在寻找的！

上下文的类型是什么？？我很沮丧，我找不到上下文的类型。

nextjs.org/docs/basic-features/…