Apollo Client GraphQL 在 Next.js getStaticProps 上创建静态页面
Apollo Client GraphQL creating static pages on Next.js getStaticProps
所以我通过在 Next.js 上实现 Apollo Client 来研究 GraphQL,我从未实现过 GraphQL API 或使用过 Apollo,并且在构建和操作查询时遇到了一些问题。我想使用 SpaceX GraphQL 服务器创建一些静态页面,并使用 getStaticProps 和 getStaticPath 从 SpaceX 服务器获取前 10 个结果,从这些路由创建静态页面并获取每个 ID 的启动详细信息。我的问题是,我无法使启动详细信息查询正常工作。服务器正在响应 400。由于结构是正确的,所以问题一定是在将变量传递给查询时出现的。
同样,我从未实现过 Apollo Client,并且对 graphQL 的了解非常初级,但在使用文档时找不到问题。
我的代码基于此示例,我只是删除了 useQuery Hook,以便我可以在 getStaticProps 中发出请求。
https://www.apollographql.com/docs/react/data/queries/
// [launchId].tsx
import { initializeApollo } from '../../lib/ApolloClient'
export const getStaticPaths: GetStaticPaths = async () => {
const apolloClient = initializeApollo()
const {
data: { launchesPast }
} = await apolloClient.query({
query: gql`
{
launchesPast(limit: 10) {
id
}
}
`
})
const paths = launchesPast.map(element => {
return {
params: {
launchId: element.id
}
}
})
return {
paths,
fallback: false
}
}
export const getStaticProps: GetStaticProps = async context => {
const apolloClient = initializeApollo()
const { launchId: id } = context.params
// const id = '100'
console.log('id', id)
console.log(typeof id)
const query = gql`
query Launch($id: id) {
launch(id: $id) {
details
}
}
`
const {
loading,
error = null,
data: { launch }
} = await apolloClient.query({ query: query, variables: { id: id } })
return {
props: {
launch,
loading,
error
},
revalidate: 20
}
}
//ApolloClient.ts
function createApolloClient(): ApolloClient<NormalizedCacheObject> {
return new ApolloClient({
// ssrMode: typeof window === 'null',
link: new HttpLink({
uri: 'https://api.spacex.land/graphql/'
}),
cache: new InMemoryCache()
})
}
/*
// ApolloClient Singleton
*/
export function initializeApollo(
initialState = null
): ApolloClient<NormalizedCacheObject> {
const _apolloClient = apolloClient ?? createApolloClient()
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
}
export function useApollo(
initialState: null
): ApolloClient<NormalizedCacheObject> {
const store = useMemo(() => initializeApollo(initialState), [initialState])
return store
}
对于搜索此内容的任何人来说,这是对 SpaceX GraphQL API 的愚蠢阅读。
id的typeof是ID(我当然知道),所以就搞定了。
const { launchId: id } = context.params
const query = gql`
query($id: ID!) {
launch(id: $id) {
id
details
}
}
`
const {
loading,
error = null,
data: { launch = null }
} = await apolloClient.query({ query: query, variables: { id: id } })
所以我通过在 Next.js 上实现 Apollo Client 来研究 GraphQL,我从未实现过 GraphQL API 或使用过 Apollo,并且在构建和操作查询时遇到了一些问题。我想使用 SpaceX GraphQL 服务器创建一些静态页面,并使用 getStaticProps 和 getStaticPath 从 SpaceX 服务器获取前 10 个结果,从这些路由创建静态页面并获取每个 ID 的启动详细信息。我的问题是,我无法使启动详细信息查询正常工作。服务器正在响应 400。由于结构是正确的,所以问题一定是在将变量传递给查询时出现的。
同样,我从未实现过 Apollo Client,并且对 graphQL 的了解非常初级,但在使用文档时找不到问题。 我的代码基于此示例,我只是删除了 useQuery Hook,以便我可以在 getStaticProps 中发出请求。 https://www.apollographql.com/docs/react/data/queries/
// [launchId].tsx
import { initializeApollo } from '../../lib/ApolloClient'
export const getStaticPaths: GetStaticPaths = async () => {
const apolloClient = initializeApollo()
const {
data: { launchesPast }
} = await apolloClient.query({
query: gql`
{
launchesPast(limit: 10) {
id
}
}
`
})
const paths = launchesPast.map(element => {
return {
params: {
launchId: element.id
}
}
})
return {
paths,
fallback: false
}
}
export const getStaticProps: GetStaticProps = async context => {
const apolloClient = initializeApollo()
const { launchId: id } = context.params
// const id = '100'
console.log('id', id)
console.log(typeof id)
const query = gql`
query Launch($id: id) {
launch(id: $id) {
details
}
}
`
const {
loading,
error = null,
data: { launch }
} = await apolloClient.query({ query: query, variables: { id: id } })
return {
props: {
launch,
loading,
error
},
revalidate: 20
}
}
//ApolloClient.ts
function createApolloClient(): ApolloClient<NormalizedCacheObject> {
return new ApolloClient({
// ssrMode: typeof window === 'null',
link: new HttpLink({
uri: 'https://api.spacex.land/graphql/'
}),
cache: new InMemoryCache()
})
}
/*
// ApolloClient Singleton
*/
export function initializeApollo(
initialState = null
): ApolloClient<NormalizedCacheObject> {
const _apolloClient = apolloClient ?? createApolloClient()
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
}
export function useApollo(
initialState: null
): ApolloClient<NormalizedCacheObject> {
const store = useMemo(() => initializeApollo(initialState), [initialState])
return store
}
对于搜索此内容的任何人来说,这是对 SpaceX GraphQL API 的愚蠢阅读。 id的typeof是ID(我当然知道),所以就搞定了。
const { launchId: id } = context.params
const query = gql`
query($id: ID!) {
launch(id: $id) {
id
details
}
}
`
const {
loading,
error = null,
data: { launch = null }
} = await apolloClient.query({ query: query, variables: { id: id } })