Nextjs - 在服务器端访问 url 参数
Nextjs - access url params on server side
我正在使用官方 with-apollo 示例来创建 nextjs 前端。我正在尝试使用用户的 slug,它可以在 url 字符串中找到来呈现用户配置文件。但是,我无法在 graphql 查询中使用 url 参数(slug)作为变量。
Link给用户简介
<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
到目前为止我已经尝试过的(以及很多其他的东西):
使用路由器:
export const userQueryVars = {
塞子:router.query.slug,
}
错误:您应该只在应用的客户端使用“next/router”。
使用路由器并检查它是否在客户端调用:
if (process.browser) {
导出常量 userQueryVars = {
塞子:router.query.slug,
}
}
错误:'import' 和 'export' 可能只出现在顶层。
如有任何帮助,我将不胜感激!!
当使用 getServerSideProps
时,您可以在 context.params
:
中找到您的 slug
(以及所有其他动态参数,如果有的话)
export async function getServerSideProps(context) {
const { slug } = context.params;
// Do whatever you need with `slug`
// ...
}
我正在使用官方 with-apollo 示例来创建 nextjs 前端。我正在尝试使用用户的 slug,它可以在 url 字符串中找到来呈现用户配置文件。但是,我无法在 graphql 查询中使用 url 参数(slug)作为变量。
Link给用户简介
<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
到目前为止我已经尝试过的(以及很多其他的东西):
使用路由器:
export const userQueryVars = { 塞子:router.query.slug, }
错误:您应该只在应用的客户端使用“next/router”。
使用路由器并检查它是否在客户端调用:
if (process.browser) { 导出常量 userQueryVars = { 塞子:router.query.slug, } }
错误:'import' 和 'export' 可能只出现在顶层。
如有任何帮助,我将不胜感激!!
当使用 getServerSideProps
时,您可以在 context.params
:
slug
(以及所有其他动态参数,如果有的话)
export async function getServerSideProps(context) {
const { slug } = context.params;
// Do whatever you need with `slug`
// ...
}