Typescript Example? about next-with-apollo HOT 6 OPEN

import withApollo from "next-with-apollo";
import ApolloClient, { InMemoryCache } from "apollo-boost";

const GRAPHQL_ENDPOINT_DEVELOPMENT = "http://localhost:4000";
const GRAPHQL_ENDPOINT_PRODUCTION = "http://ALIAS.USER.now.sh/API_ENDPOINT";

const GRAPHQL_ENDPOINT =
  process.env.NODE_ENV === "development"
    ? GRAPHQL_ENDPOINT_DEVELOPMENT
    : GRAPHQL_ENDPOINT_PRODUCTION;

export default withApollo(
  ({ ctx, headers, initialState }) =>
    new ApolloClient({
      uri: GRAPHQL_ENDPOINT,
      cache: new InMemoryCache().restore(initialState || {})
    })
);

import React from "react";
import App, { Container } from "next/app";
import { ApolloProvider } from "react-apollo";
import { ApolloProvider as ApolloHooksProvider } from "react-apollo-hooks";
import withApolloClient from "../lib/withApolloClient";
import { ApolloClient } from "apollo-boost";

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

class MyApp extends App<Props> {
  render() {
    const { Component, pageProps, apollo } = this.props;

    return (
      <Container>
        <ApolloProvider client={apollo}>
          <ApolloHooksProvider client={apollo}>
            <Component {...pageProps} />
          </ApolloHooksProvider>
        </ApolloProvider>
        <style jsx global>{`
          body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              Helvetica, Arial, sans-serif, "Apple Color Emoji",
              /* Emojis*/ "Segoe UI Emoji", /* Emojis*/ "Segoe UI Symbol"; /* Emojis*/
          }
        `}</style>
      </Container>
    );
  }
}

export default withApolloClient(MyApp);

import React from "react";
import styled from "styled-components";
import { Query } from "react-apollo";
import {
  filterPosts,
  filterPostsVariables
} from "../src/graphql/generated/filterPosts";
import { FILTER_POSTS } from "../src/graphql/queries";

class FilterPostsQuery extends Query<filterPosts, filterPostsVariables> {}

const Test = styled.h1`
  color: green;
`;

const Index = () => {
  return (
    <FilterPostsQuery
      query={FILTER_POSTS}
      variables={{ searchString: "te" }}
      ssr={false}
    >
      {({ data, loading }) => {
        if (loading) return <Test>Loading</Test>;
        if (data)
          return <Test>{data.filterPosts && data.filterPosts[0].id}</Test>;
      }}
    </FilterPostsQuery>
  );
};

export default Index;

import { ApolloClient } from "apollo-boost";

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