{"id":18594917,"url":"https://github.com/sethbergman/nextapollo","last_synced_at":"2026-05-06T01:36:03.929Z","repository":{"id":69157420,"uuid":"98073110","full_name":"sethbergman/NextApollo","owner":"sethbergman","description":"Next.js with GraphQL and Apollo | https://with-apollo-auth-ghrwworbal.now.sh","archived":false,"fork":false,"pushed_at":"2017-07-23T04:08:04.000Z","size":60,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-01T20:48:28.862Z","etag":null,"topics":["apollo","graphcool","graphql","next","nextjs","now","webtask"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sethbergman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-23T03:52:55.000Z","updated_at":"2022-02-13T04:54:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"84417946-d052-4d8d-851c-5d13af3c9b6f","html_url":"https://github.com/sethbergman/NextApollo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethbergman%2FNextApollo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethbergman%2FNextApollo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethbergman%2FNextApollo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethbergman%2FNextApollo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sethbergman","download_url":"https://codeload.github.com/sethbergman/NextApollo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254527096,"owners_count":22085919,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo","graphcool","graphql","next","nextjs","now","webtask"],"created_at":"2024-11-07T01:17:45.959Z","updated_at":"2025-10-21T18:02:33.866Z","avatar_url":"https://github.com/sethbergman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-apollo-auth)\n# Apollo With Authentication Example\n\n## Demo\n\nhttps://next-with-apollo-auth.now.sh\n\n## How to use\n\nDownload the example [or clone the repo](https://github.com/zeit/next.js):\n\n```bash\ncurl https://codeload.github.com/zeit/next.js/tar.gz/v3-beta | tar -xz --strip=2 next.js-3-beta/examples/with-apollo-auth\ncd with-apollo-auth\n```\n\nInstall it and run:\n\n```bash\nnpm install\nnpm run dev\n```\n\nDeploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):\n\n```bash\nnow\n```\n\n## The idea behind the example\n\nThis is an extention of the _[with Apollo](https://github.com/zeit/next.js/tree/master/examples/with-apollo#the-idea-behind-the-example)_ example:\n\n\u003e [Apollo](http://dev.apollodata.com) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run, fetching more results from the server.\n\u003e \n\u003e In this simple example, we integrate Apollo seamlessly with Next by wrapping our *pages* inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a central store of query result data created by Apollo into our React component hierarchy defined inside each page of our Next application.\n\u003e \n\u003e On initial page load, while on the server and inside `getInitialProps`, we invoke the Apollo method,  [`getDataFromTree`](http://dev.apollodata.com/react/server-side-rendering.html#getDataFromTree). This method returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized.\n\u003e \n\u003e This example relies on [graph.cool](https://www.graph.cool) for its GraphQL backend.\n\u003e \n\u003e *Note: Apollo uses Redux internally; if you're interested in integrating the client with your existing Redux store check out the [`with-apollo-and-redux`](https://github.com/zeit/next.js/tree/master/examples/with-apollo-and-redux) example.*\n\n[graph.cool](https://www.graph.cool) can be setup with many different\n[authentication providers](https://www.graph.cool/docs/reference/integrations/overview-seimeish6e/#authentication-providers), the most basic of which is [email-password authentication](https://www.graph.cool/docs/reference/simple-api/user-authentication-eixu9osueb/#email-and-password). Once email-password authentication is enabled for your graph.cool project, you are provided with 2 useful mutations: `createUser` and `signinUser`.\n\nOn loading each route, we perform a `user` query to see if the current visitor is logged in (based on a cookie, more on that in a moment). Depending on the query result, and the route, the user may be [redirected](https://github.com/zeit/next.js/blob/master/examples/with-apollo-auth/lib/redirect.js) to a different page.\n\nWhen creating an account, both the `createUser` and `signinUser` mutations are executed on graph.cool, which returns a token that can be used to [authenticate the user for future requests](https://www.graph.cool/docs/reference/auth/authentication-tokens-eip7ahqu5o/). The token is stored in a cookie for easy access (_note: This may have security implications. Please understand XSS and JWT before deploying this to production_).\n\nA similar process is followed when signing in, except `signinUser` is the only mutation executed.\n\nIt is important to note the use of Apollo's `resetStore()` method after signing in and signing out to ensure that no user data is kept in the browser's memory.\n\nTo get this example running locally, you will need to create a graph.cool\naccount, and provide [the `project.graphcool` schema](https://github.com/zeit/next.js/blob/master/examples/with-apollo-auth/project.graphcool).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsethbergman%2Fnextapollo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsethbergman%2Fnextapollo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsethbergman%2Fnextapollo/lists"}