Apollo Client v3 Fullstack Next.js Setup with SSR + Nexus Schema
Why Stack Overflow recommends it
Stack Overflow users link it as the tutorial they followed when setting up Apollo with Next.js API routes, and then ask about problems such as basePath 404s or a hanging page after a production build.
Recommended by 1 people across 1 different months, 2020 to 2021.
What it is
A 31-minute tutorial by Leigh Halliday that rebuilds the Next.js Apollo example from scratch. It sets up Apollo Server inside a Next.js API route, builds a schema with Nexus, configures Apollo Client v3 with an isomorphic link, and queries data both client-side and with SSR.
What people said
Recommends Aman Bhardwaj · 2020-09 · Stack Overflow · on “How to call Graphql Url in Next JS”
I assume that your GraphQL backend is already setup. So, all that's left must be the setup of apollo client. You can follow the following procedure. First install apollo client yarn add @apollo/client _app.jsx import { ApolloProvider } from '@apollo/client' import { ApolloProvider, ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client'; import { setContext } from '@apollo/client/link/context'; const httpLink = createHttpLink({ uri: ' [LINK] ', }) const authLink = setContext((_, { headers }) => { // replace this with your secret const token = process.env.ACCESS_TOKEN; return { headers: { ...headers, authorization: token ? `token ${token}` : "", } } }) const apolloClient = new Apo
Cites Nick Truby · 2021-06 · Stack Overflow · on “API Routes on Next.JS with Apollo-Server : why does using a basePath cause error?”
I'm using API Routes [LINK] on a Next.JS app with Apollo-Server, to create a GraphQL API wrapper around a REST endpoint. But I'm running into an issue if the project has a bathPath [LINK] . I've been following this example [LINK] , and a video tutorial on youtube [this video] . I've replicated my issue by using the repo [LINK] from that tutorial. Upon running that code $ yarn dev , and navigating to [LINK] the GraphQl playground shows up, and works as expected. However if I add a basepath to the project then the graphQl playground still shows up fine at [LINK] but it gives me the error of "Server cannot be reached" and shows a 404 error in the network tab on the dev tools. To add the base path I
Cites Ian Tran · 2021-08 · Stack Overflow · on “Apollo, NextJS, and API Route failed to display content”
I'm trying to setup data fetching with Next.JS, GraphQL and Next.JS based on this tutorial: [this video] It works smoothly on dev, yarn build was successful, deploying to vercel is successful without any error, but it shows forever spinning and "page is not responsive" alert when I run yarn start (or deploy it). Here is the preview: [LINK] Here is my setup: // schema import { gql } from "apollo-server" export const typeDefs = gql` type Media { long: String video: String closeup: String lifestyle_1: String lifestyle_2: String photometric: String designerPhoto: String } type Variant { variantID: ID sku: String size: String brand: String media: Media price: String brandID: ID category: String design