Next.js: Typescript Issue, with-apollo example, usage of App as a typed parameter in HOC.

[james-ff]

with-apollo Example bug report

Describe the bug

I am using the with-apollo example in my project, which I have recently converted to Typescript. I have been able to successfuly make the switch to Typescript, apart from one file in the example with-apollo-client.js which is now .tsx for me.

Example File:
https://github.com/zeit/next.js/blob/canary/examples/with-apollo/lib/with-apollo-client.js

I have set a type for the App / AppComponent in the Higher Order Component here to AppComponentType from 'next/app', just adding apolloClient as a prop, which seems to be correct.

The issue is in the difference in the usage of the AppComponent in render and in getInitialProps functions. In getInitialProps it receives all of it's props and is happy. But in render there is a Type Error saying that it isn't being given Component or router. I'm not quite sure what is right here: should the render version have these props? should these props be optional? Is this a typescript thing that can be corrected?

Screenshots

AppComponent definition at the start of the HOC, (AppComponentType imported from 'next/app'):

Definition of ApolloProps, for clarity:

Usage in getInitialProps function:

Usage in render function, missing Component and router as props:

The Type error on AppComponent in the render function (missing Component / router props):

System information

• OS: macOS
• Version of Next.js: 8.0.3

[msreekm]

if you add this to your app.tsx ,it should fix the erorr-

interface IProps {
  apolloClient: any;
}
MyApp extends App<IProps> {
}

[james-ff]

Thank you for your suggestion, this helps, but the props in question { Component, router } are the issue here primarily. (Screenshots 3-5 where is used)

[skliffmueller]

I would get similar errors, from pageProps not being assigned on my App component, getInitialProps not being assigned properly, or Component, router not being assigned.

This was my fix:

with-apollo-client.tsx
```import React from 'react'
import initApollo from './init-apollo'
import Head from 'next/head'
import { getDataFromTree } from 'react-apollo'
import { AppComponentType, AppProps, DefaultAppIProps, NextAppContext } from 'next/app';
import { ApolloClient, NormalizedCacheObject } from 'apollo-boost'

export interface IApolloProps {
apolloState?: NormalizedCacheObject;
apolloClient: ApolloClient;
}

export default (MyApp: AppComponentType) => {
return class Apollo extends React.Component {
public apolloClient: ApolloClient;
static displayName = 'withApollo(App)';
static async getInitialProps (ctx: NextAppContext) {
const { Component, router } = ctx;

  let appProps = {}
  if (MyApp.getInitialProps) {
    appProps = await MyApp.getInitialProps(ctx)
  }
  // Run all GraphQL queries in the component tree
  // and extract the resulting data
  const apollo = initApollo();
  try {
    // Run all GraphQL queries
    await getDataFromTree(
  <MyApp
        {...appProps}
        pageProps={{}}
        Component={Component}
        router={router}
        apolloClient={apollo}
    />
  )
  } catch (error) {
    // Prevent Apollo Client GraphQL errors from crashing SSR.
    // Handle them in components via the data.error prop:
    // https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-query-data-error
    console.error('Error while running `getDataFromTree`', error)
  }

  // getDataFromTree does not call componentWillUnmount
  // head side effect therefore need to be cleared manually
  Head.rewind();


  // Extract query data from the Apollo store
  const apolloState = apollo.cache.extract();

  return {
    ...appProps,
    apolloState,
  }
}

constructor (props: IApolloProps & DefaultAppIProps & AppProps) {
  super(props);
  this.apolloClient = initApollo(props.apolloState);
}

render () {
  return <MyApp
    {...this.props}
    apolloClient={this.apolloClient}
  />
}

}
}

_app.tsx

import {AppProps, Container, DefaultAppIProps} from 'next/app';
import * as React from "react";
import withApolloClient, {IApolloProps} from '../lib/with-apollo-client'
import { ApolloProvider } from "react-apollo";

class MyApp extends React.Component {
render() {
const { Component, pageProps, apolloClient } = this.props;
return (




);
}
}

export default withApolloClient(MyApp);
```

[huv1k]

Closing @skliffmueller explanation should work if it's still a problem please comment again.

[muco-rolle]

kl

[rheaditi]

@skliffmueller @huv1k

Any suggestions for adding typings for the new withApollo examples for Page Components?
Trying to use typings similar to withRouter HOC, but getting some errors:

[d-dmytro]

@rheaditi Suggestions about typings: https://gist.github.com/d-dmytro/5269b6cba5efea557ce35ad38778ec2e