- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有带有 getServerSideProps 的页面:
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apolloClient = initializeApollo()
await apolloClient.query({
query: UserQuery,
variables: { id: Number(ctx.query.id) },
})
return {
props: { initialApolloState: apolloClient.cache.extract() },
}
}
和用户的解析器:
resolve: async (_parent, { where }, ctx, info) => {
const select = new PrismaSelect(info).value
console.log(ctx) // {} why is empty when i use getServerSideProps?
const res = await ctx.db.user.findOne({
where: { id: 1 },
...select,
})
return null
},
相同的客户端查询工作正常,但出于某种原因,当我使用
getServerSideProps
时ctx 为空。如何解决这个问题?
const apolloClient = initializeApollo(null, ctx)
,但它不会运行带有 db 属性的 apolloServer ctx 解析器函数,并且 ctx.db 将是未定义的。
const apolloServer = new ApolloServer({
schema,
async context(ctx: Ctx): Promise<Ctx> {
ctx.db = prisma
return ctx
},
})
export const apolloServerHandler = apolloServer.createHandler({ path: '/api/graphql' })
Apollo-客户:
import { useMemo } from 'react'
import { ApolloClient, InMemoryCache, NormalizedCacheObject } from '@apollo/client'
import { IncomingMessage, ServerResponse } from 'http'
type ResolverContext = {
req?: IncomingMessage
res?: ServerResponse
}
const typePolicies = {
Test: {
keyFields: ['id'],
},
User: {
keyFields: ['id'],
},
}
let apolloClient: ApolloClient<NormalizedCacheObject>
function createIsomorphLink(context: ResolverContext = {}): any {
if (typeof window === 'undefined') {
const { SchemaLink } = require('@apollo/client/link/schema')
const { schema } = require('backend/graphql/schema')
return new SchemaLink({ schema, context })
} else {
const { HttpLink } = require('@apollo/client/link/http')
return new HttpLink({
uri: '/api/graphql',
credentials: 'same-origin',
})
}
}
function createApolloClient(context?: ResolverContext): ApolloClient<NormalizedCacheObject> {
return new ApolloClient({
ssrMode: typeof window === 'undefined',
link: createIsomorphLink(context),
cache: new InMemoryCache({ typePolicies }),
})
}
export function initializeApollo(
initialState: any = null,
// Pages with Next.js data fetching methods, like `getStaticProps`, can send
// a custom context which will be used by `SchemaLink` to server render pages
context?: ResolverContext
): ApolloClient<NormalizedCacheObject> {
const _apolloClient = apolloClient ?? createApolloClient(context)
// If your page has Next.js data fetching methods that use Apollo Client, the initial state
// get hydrated here
if (initialState) {
// Get existing cache, loaded during client side data fetching
const existingCache = _apolloClient.extract()
// Restore the cache using the data passed from getStaticProps/getServerSideProps
// combined with the existing cached data
_apolloClient.cache.restore({ ...existingCache, ...initialState })
}
// For SSG and SSR always create a new Apollo Client
if (typeof window === 'undefined') return _apolloClient
// Create the Apollo Client once in the client
if (!apolloClient) apolloClient = _apolloClient
return _apolloClient
}
// eslint-disable-next-line
export function useApollo(initialState: any): ApolloClient<NormalizedCacheObject> {
const store = useMemo(() => initializeApollo(initialState), [initialState])
return store
}
最佳答案
您需要应用上下文解析器:
async contextResolver(ctx: Ctx): Promise<Ctx> {
ctx.db = prisma
return ctx
},
const apolloServer = new ApolloServer({
schema,
context: contextResolver,
})
在 getServerSideProps 中:
export const getServerSideProps: GetServerSideProps = async (ctx) => {
await contextResolver(ctx)
const apolloClient = initializeApollo(null, ctx)
await apolloClient.query({
query: UserQuery,
variables: { id: Number(ctx.query.id) },
})
return {
props: { initialApolloState: apolloClient.cache.extract() },
}
}
关于SSR getServerSideProps 上的 Next.js graphql 上下文为空 {},我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64537328/
我正在使用 NextJS 12。我正在尝试获取本地存储对象。当我在 getServerSideProps 中使用 localstorage 时,我收到类似这样的错误 ReferenceError: l
我在我的 NextJs 应用程序中使用了两个库:next-firebase-auth 和 next-redux-wrapper。它们都需要我用它们各自的函数包装 getServerSideProps。
我正在尝试有条件地 SSR 下一页,但在互联网上缺乏类似情况的答案让我相信我对 NextJS 和 SSR 的理解完全不正确,所以我希望得到一些澄清。 这是我的理解:在我们的页面文件中导出函数 getS
我们只有很少的页面和组件作为服务器端渲染。 我们试图对少数 API 响应使用缓存。 export async function getServerSideProps(context) { con
有没有办法在一个 getServerSideProps() 中从多个 API 路由中获取数据? ? 我有一张表,我需要显示来自多个 MongoDB 集合的数据,并试图弄清楚如何提取这些数据。 本质上,
我正在创建一个页面,我可以在其中概览我的所有笔记/摘要。 笔记的页面是转换为动态文件中使用的 HTML 的 markdown 文件(这可行)。 在笔记页面(列出所有笔记),我想实现一个搜索功能: 我需
我正在调用 getServerSideProps 并传入 req 和 res 参数,如下所示: export async function getServerSideProps({ req, res
您好,按照文档 getServerSideProps是仅在服务器端执行的函数。 export async function getServerSideProps(context) { consol
我正在尝试包装 getServersideProps使用身份验证处理程序函数,但不断收到此错误:TypeError: getServerSideProps is not a function我的包装看
我有一个 Next.js 页面,它在 getServerSideProps() 中从数据库中获取数据(使用 prisma 作为 ORM)。 我的工作基于 this example from an of
有没有一种方法可以让我们拥有类似于在 client-side 上获取数据时的加载状态? ? 我想要一个加载状态的原因是有一个加载骨架之类的东西,例如 react-loading-skeleton在客户
当我在下一个 js 中使用 getServerSideProps 时,页面加载几乎需要 5 或 6 秒。我尝试只使用一个 url 来获取而不是很多,但再次加载页面需要很多时间。 export cons
我想我在这里制造了某种困惑。 根据documentation ,如果我想要页面的服务器端渲染(SSR),我导出异步函数: getServerSideProps 但是,如果我这样做,我将无法构建在本地或
Next.js 9.3 引入 getServerSideProps .在 getInitialProps documentation它现在说: If you're using Next.js 9.3
我正在尝试学习nextjs。正在努力解决 getServerSideProps 的路由问题. 使用免费的 API,我在 DOM 上显示了一个国家列表。我想动态链接到一个国家,并为该特定国家获取和显示数
我从一个新的 Next 应用程序开始,并尽可能使用功能组件而不是基于类的组件。关注documentation ,我没有运气就设置了以下内容: import React from 'react'; im
我从一个新的 Next 应用程序开始,并尽可能使用功能组件而不是基于类的组件。关注documentation ,我没有运气就设置了以下内容: import React from 'react'; im
我正在 pages/post/index.js 中使用 getServerSideProps : import React from "react"; import Layout from "../.
现在,我在 http://localhost:3000/,但在产品中我将在不同的 url,例如 http://example.com/,如何在 getServerSideProps 中获取完整的浏览器
如果有签名用户,我想使用 getServerSideProps 在 Firestore 中获取“示例”文档。下面的代码不起作用。结果是“无法读取”我应该怎么办?或者有其他方法吗? export con
我是一名优秀的程序员,十分优秀!