NextJS/Typescript/Apollo 错误；类型上不存在属性

Question

我对 NextJS 和 Typescript 还很陌生，我正在实现无头 CMS Strapi，但在使用 Apollo 时遇到了问题。我整个周末都在搜索谷歌，试图更好地理解这个问题。我希望有人可以在这里帮助我。

错误

在我的_app.tsx 中收到以下错误

Property 'apollo' does not exist on type 'AppPropsType<Router, {}>'.

下面的MyApp 函数出现错误。

我的_app.tsx

import * as React from 'react'
import { AppProps } from 'next/app'
import { ApolloProvider } from '@apollo/react-hooks'
import withData from '../../utils/apollo'

import 'circular-std'
import 'react-multi-carousel/lib/styles.css'
import '../scss/styles.scss'

function MyApp({ Component, pageProps, apollo }: AppProps) {
  return (
    <ApolloProvider client={apollo}>
      <Component {...pageProps} />
    </ApolloProvider>
  )
}

export default withData(MyApp)

在前端设置第 3 节下对应 Strapi setup tutorial here。

Answer 1

您得到的错误是正确地告诉您，来自 NextJS 的 AppProps 没有 apollo 属性，因为 NextJS 对阿波罗一无所知。 Apollo 是一个不同的图书馆。

要设置ApolloProvider，您需要create your client as described in the Apollo docs。像这样的：

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
});

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ApolloProvider client={client}>

Answer 2

或者，我做了以下事情：

import App, { AppProps  } from 'next/app';
import { ApolloProvider, ApolloClient } from '@apollo/client';

interface Props {
  apollo: ApolloClient<{}>;
}

const MyApp = ({ Component, pageProps, apollo }: AppProps & Props) => {
}