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

Posted 2023-03-10

【中文标题】NextJS/Typescript/Apollo 错误；类型上不存在属性

【英文标题】：NextJS/Typescript/Apollo error; property does not exist on type

【发布时间】：2020-07-09 22:50:54

【问题描述】：

我对 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。

【参考方案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>

【讨论】：

感谢 Klas 的回复，现在正在进一步研究！

【参考方案2】：

或者，我做了以下事情：

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

interface Props 
  apollo: ApolloClient<>;


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