Typescript Example?

[adamsoffer]

Are there any typescript examples that use this library that you know of?

[lfades]

@adamsoffer No afaik 😢

[n1xn]

@adamsoffer I got it working like this

withApolloClient.tsx

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 || {})
    })
);

_app.tsx

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);

index.tsx

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;

This example is now using apollo-codegen and I am using ssr prop to switch between logic.

[adamsoffer]

thanks @NikoMontana !

[n1xn]

@adamsoffer here is the updated interface for _app.tsx

import { ApolloClient } from "apollo-boost";

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

[Vadorequest]

https://github.com/UnlyEd/next-right-now is completely OSS and uses this package, it also uses TS.

See

• https://github.com/UnlyEd/next-right-now/blob/master/src/hoc/withUniversalGraphQLDataLoader.ts
• https://github.com/UnlyEd/next-right-now/blob/master/src/pages/examples.tsx

[sinclairnick]

Use these instead of the next type signatures for getStaticProps and getServerSideProps.

type GetServerSidePropsWithApollo<
  P extends { [key: string]: any } = { [key: string]: any },
  Q extends ParsedUrlQuery = ParsedUrlQuery
> = (
  context: GetServerSidePropsContext<Q> & {
    apolloClient: ApolloClient<InMemoryCache>;
  }
) => Promise<GetServerSidePropsResult<P>>;

type GetStaticPropsWithApollo<
  P extends { [key: string]: any } = { [key: string]: any },
  Q extends ParsedUrlQuery = ParsedUrlQuery
> = (
  context: GetStaticPropsContext<Q> & {
    apolloClient: ApolloClient<InMemoryCache>;
  }
) => Promise<GetStaticPropsResult<P>>;