Comments (6)
@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.
from next-with-apollo.
@adamsoffer here is the updated interface for _app.tsx
import { ApolloClient } from "apollo-boost";
interface Props {
apollo: ApolloClient<{}>;
}
from next-with-apollo.
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
from next-with-apollo.
@adamsoffer No afaik 😢
from next-with-apollo.
thanks @NikoMontana !
from next-with-apollo.
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>>;
from next-with-apollo.
Related Issues (20)
- How to acces react context in HOC withApollo example? HOT 2
- Allow error handling on the server HOT 15
- Why prevent Apollo Client GraphQL errors from crashing SSR? HOT 1
- useQuery yields incorrect loading state during SSR HOT 1
- Missing meta data when upgrading from 4.3.0 to 5.0.1 HOT 2
- Still sending HTTP queries when getDataFromTree is not defined HOT 1
- When using @apollo/client it's not working HOT 1
- Cookie Disappearing after reload
- Testing getInitialProps when using ctx.apolloClient
- Option to use `getDataFromTree` also on client? HOT 3
- Are there any plans to upgrade this library to apollo/client 3.x ? HOT 6
- Query data null on server side HOT 1
- ctx is not added to props on the initial render HOT 2
- SSR is working on development but not working after build HOT 2
- Use getServerSideProps instead of getInitialProps HOT 7
- Support Next.js v11 HOT 1
- Type Error Using New Apollo HOT 2
- Update `5.3.0` broke router usage in _app.js HOT 3
- Detected multiple renderers concurrently rendering the same context provider HOT 6
- initialState is undefined despite passing getDataFromTree
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-with-apollo.