⚡ Next GraphQL Data

• A Next.js React app using GraphQL & Apollo-Server-Micro to get data from a JSON file.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

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

📚 General Info

• Displays data from the xxGraphQL API.
• 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 tawsks more complex and there are possible performance issues that would not occur using REST with a web cache.
• GraphQL Code Generator to generate code from GraphQL schema - configured using a condegen.yml file
• Mantine AppShell used to provide a responsive shell for the app. with header and navbar

📷 Screenshots

.

📶 Technologies

• Node.js v16 javascript runtime using the Chrome V8 engine.
• React v18 Javascript library.
• GraphQL v15 API query language
• apollo-server-micro v3 Node.js GraphQL server for Micro
• Next v12 minimalist framework for rendering react apps on the server.
• TypeGraphQL v1 modern framework for GraphQL API in Node.js
• Mantine v4 React components library
• tabler icons react v1, here is the icon list

💾 Setup

• yarn install to install dependencies
• yarn dev runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

💻 Code Examples

• _app.js function to display app contents using Hydrate (DOM pre-built using Server-Side HTML Rendering)

function MyApp({ Component, pageProps }) {
  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </Hydrate>
    </QueryClientProvider>
  );
}

📋 Status & To-Do List

• Status: Working using JSON data file
• To-Do: Replace JSON data with actual API data, Put nav at top

👏 Inspiration

• Jack Herrington: NextJS + GraphQL Blueprint: Professional Grade Setup

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: [email protected]