⚡ Next Apollo GraphQL

• A Next.js React app using Apollo GraphQL to get data from an API.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Next Apollo GraphQL
  • 📄 Table of contents
  • 📚 General Info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General Info

• Previously displayed data from the Netlify fruits API but this is no longer live. The API is now down.
• Next.js is for server-rendered react apps. It has automatic code splitting, simple page-based routing, built-in CSS support and hot reloading. Every component file in the pages folder is treated as a page.
• Apollo Client used to fetch data using GraphQL.
• GraphQL only return the data requested. Data only served from a single end-point. Lots of companies use it. GraphQL makes tasks more complex and there are possible performance issues that would not occur using REST with a web cache.
• Tailwind CSS added to Next.js
• Picsum API random photo is displayed
• Latest Next/Image optimisation used so image downloaded as Webp format and automatically sized. This is a major advantage over non-optimised Images.
• Converted to Progressive Web App (PWA).
• Custom Document file ./pages/_document.js created to override and extend default Document. It injects meta tags into every page

📷 Screenshots

.

📶 Technologies

• Node.js v18 javascript runtime using the Chrome V8 engine.
• React v18 Javascript library.
• GraphQL v16
• Apollo v3 GraphQL implementation data graph layer
• Next v13 minimalist framework for rendering react apps on the server. Only v12.2.2 works, higher version causes errors.
• Next with Apollo v5 to save coding time
• Apollo Client v3 caching GraphQL client to UI components can fetch data via GraphQL. More documentation here.
• Picsum API image. No API key required, image size can be specified in url

💾 Setup

• npm run codegen to run codegen to generate output to generated/index.tsx
• npm run dev runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
• npm run build builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.

💻 Code Examples

• withApollo function to return instance of Apollo client

const withApollo = nextWithApollo(

  ({ initialState, headers }) => {
    return new ApolloClient({
      ssrMode: typeof window === "undefined",
      link: new HttpLink({
        uri: "https://rickandmortyapi.com/graphql",
      }),
      headers: {
        ...(headers as Record<string, string>),
      },
      cache: new InMemoryCache().restore(initialState || {}),
    });
  },
  {
    // eslint-disable-next-line react/display-name
    render: ({ Page, props }) => {
      // eslint-disable-next-line react-hooks/rules-of-hooks
      const router = useRouter();
      return (
        <ApolloProvider client={props.apollo}>
          <Page {...props} {...router} />
        </ApolloProvider>
      );
    },
  }
);

📋 Status & To-Do List

• Status: Working
• To-Do: Update sitemap, robots files. Add styles

👏 Inspiration

• TomDoesTech: Apollo Client (3) in Next.js (10) with TypeScript & GraphQL Code Generator
• How to Loop in React JSX

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com