这确实是因为 Prismic GraphQL api 使用 GET 而不是 POST 请求。实际上,我没有找到任何工具可以使用 GET 内省 GraphQL 端点。经过一番挖掘后,提出了以下解决方案:
- 此代码基于prismic-apollo-link。由于我将它与 Next JS 结合使用(我需要同构 unfetch),因此我对其进行了轻微修改。如果你不使用 Next JS,你仍然需要它,因为我们需要 fetch 才能在 Node.js 中工作。
import {ApolloClient} from 'apollo-client'
import {InMemoryCache} from 'apollo-cache-inmemory'
import {HttpLink} from 'apollo-link-http'
import {setContext} from 'apollo-link-context'
import Prismic from 'prismic-javascript'
import fetch from 'isomorphic-unfetch'
const baseEndpoint = 'https://<your project>.cdn.prismic.io'
const accessToken = '<your access token>'
export default function createApolloClient(initialState, ctx) {
const primicClient = Prismic.client(`${baseEndpoint}/api`, {accessToken})
const prismicLink = setContext((req, options) => {
return primicClient.getApi().then(api => ({
headers: {
'Prismic-ref': api.masterRef.ref,
...options.headers,
...((api as any).integrationFieldRef
? {'Prismic-integration-field-ref': (api as any).integrationFieldRef}
: {}),
...(accessToken ? {Authorization: `Token ${accessToken}`} : {}),
},
}))
})
const httpLink = new HttpLink({
uri: `${baseEndpoint}/graphql`,
useGETForQueries: true,
fetch,
})
return new ApolloClient({
ssrMode: Boolean(ctx),
link: prismicLink.concat(httpLink),
cache: new InMemoryCache().restore(initialState),
})
}
- 编写一个脚本来自省 Prismic GraphQL 服务器:
import createApolloClient from '../apolloClient'
import gql from 'graphql-tag'
import path from 'path'
import fs from 'fs'
const client = createApolloClient({}, null)
const main = async () => {
try {
const res = await client.query({
query: gql`
query IntrospectionQuery {
__schema {
queryType {
name
}
mutationType {
name
}
subscriptionType {
name
}
types {
...FullType
}
directives {
name
description
locations
args {
...InputValue
}
}
}
}
fragment FullType on __Type {
kind
name
description
fields(includeDeprecated: true) {
name
description
args {
...InputValue
}
type {
...TypeRef
}
isDeprecated
deprecationReason
}
inputFields {
...InputValue
}
interfaces {
...TypeRef
}
enumValues(includeDeprecated: true) {
name
description
isDeprecated
deprecationReason
}
possibleTypes {
...TypeRef
}
}
fragment InputValue on __InputValue {
name
description
type {
...TypeRef
}
defaultValue
}
fragment TypeRef on __Type {
kind
name
ofType {
kind
name
ofType {
kind
name
ofType {
kind
name
ofType {
kind
name
ofType {
kind
name
ofType {
kind
name
ofType {
kind
name
}
}
}
}
}
}
}
}
`,
})
if (res.data) {
const schema = JSON.stringify(res.data)
// Specify where the schema should be written to
fs.writeFileSync(path.resolve(__dirname, '../../schema.json'), schema)
} else {
throw new Error('No Data')
}
process.exit()
} catch (e) {
console.log(e)
process.exit(1)
}
}
main()
- 包括你的脚本
codegen.yml
:
schema: "./schema.json"
documents: ./src/**/*.graphql
generates:
./src/generated.tsx:
plugins:
- typescript
- typescript-operations
- typescript-react-apollo
config:
withHooks: true
withComponent: false
hooks:
afterStart:
- ts-node <path to script>/introspectPrismic.ts
也许这不是最优雅的解决方案,但它确实有效!