- 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
- 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
- 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
yarn install
to install dependenciesyarn dev
runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
_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: Working using JSON data file
- To-Do: Replace JSON data with actual API data, Put nav at top
- N/A
- Repo created by ABateman, email: [email protected]