High performance Next + React + GraphQL starter kit
The purpose of this starter kit is not to be complete solution, but introduction for creating high performance websites with Next.js, React and GraphQL. We use this repository for new projects at Atheros Intelligence and as the repository for our articles at GraphQL Mastery
- Clone the repository with
git clone git@github.com:atherosai/next-react-graphql-apollo-hooks.git - To preserve secure dependencies in
package-lock.jsonusenpm cito install packages
Node.js version
Even though that the starter kit should work with older Node versions, I would suggest to use latest Node LTS version. In package.json. We have set requirements as follows:
"engines": {
"node": ">=10.0.0",
"npm": ">6"
},
Technologies & main features
- Next.js
- React
- GraphQL (Apollo server)
- Apollo client
- React Apollo Hooks
- Node.js
- TypeScript
- GraphQL Code Generator
- Jest
Production usage
In order to achieve the best performance you should have enabled http/2 and also enable compression in your reverse proxy (nginx). Up to date Node.js server is also very benefitial.
Environment configuration
The solution for environment variables is built using dotenv library and two environment variables. Well known NODE_ENV variable can be set as development or production and our CUSTOM_ENV, which defines the environment. This can be your staging, production, local environment or even your build server. These two variables define the name of .env file in /secrets folder that will be used. If we would like to for example define the config for our staging environment we would create the file called /secrets/production-staging.env and place all the environment variables there. The example for such a file can be for example the following that we can use for development
NODE_ENV=development
CUSTOM_ENV=local
PORT=3000
API_URL=http://localhost:3000/graphql
HOST=http://localhost:3000
Security and audit
You can run security audit on dependencies with. Be sure that you use package-lock.json in our repository.
npm audit
-
React Hook React Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 拥抱 React Hook 什么是 Hook？ Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用。 什么时候使用 Hook？ 如果你在编写函数
-
graphql与react的相遇 还记得我在thegraph发布了一个子图，我一直在想怎么从这个子图取出数据。由于本人太菜，想了很多方式。首先，我考虑了这个子图的工作机制，它使用的是graphql查询语言。（这里就不讲thegraph了，官网的讲解，大佬的认知比我深入到位。）然后呢，我就去看这个graphql，一种用于API的查询语言。又遇到了一个问题，API,熟悉又陌生的词汇啊。 API:是一些
-
通过文档可以看出，React Hooks被开发出来主要是这三个理由： 难以复用类组件之间的逻辑 生命周期中经常包含一些莫名其妙的不相关逻辑 类组件难以被机器和人理解 Hooks是React最近更新的部分特性，让你的函数组件可以做类组件能做的事情。
-
个人测试 bug多多 // 柱状图 import React, { Component, useEffect, useRef, useState } from "react"; import { View } from "@tarojs/components"; import { EChart } from "echarts-taro3-react"; import "./index.less"
-
class Koa { constructor() { this.middleWaver = [] } use(fn) { this.middleWaver.push(fn) } }; const app = new Koa(); const f1 = async function (ctx, nex
-
阮一峰链接 阮一峰链接 hook 使用hook的原因： 使用class创建组件，大型组件状态和逻辑组合在一起来，很难拆分和维护，使用不方便，所以改用hook。 hook作用： 在不使用class的情况下，也可以使用状态，也可以使用生命周期。使用函数创建数组。react hook就是加强版的函数式组件，完全可以不使用class，创建出一个复杂的组件。 hook钩子 react hook中提供很多的钩
-
antd的锚点坑太大，a标签锚点又在用hashRouter的时候不适用，只能自己想办法了，经过试验，总结了以下方法： 1、 HeaderTabs: [ { href: 'auction-detail', text: '拍卖详情' }, { href: 'standard-detail', text: '标的详情' }, { href: 'others-detail', text: '其他' },
-
总算，间间断断的把这个demo写完了，算是学习一下graphql的用法，也先不去深入学习了，主要是了解用法以及概念。这个项目后台使用koa + apollo-server，前台用的react（带hooks的版本），原先打算用MongoDB，后来干脆直接读写模拟数据了，然后记录下，看看怎么写吧。 后台 模块引入 const { ApolloServer, gql } = require('apoll
-
A React + Apollo + GraphQL GitHub Client Features React 16 with create-react-app Responsive React Router 4 Apollo with GitHub GraphQL API Queries and Mutations with render props Optimistic Updates Pag
-
React + GraphQL + Next.js + Apollo + Scss + Typescript Starter Project boostrap built with: React.js Next.js Typescript SCSS Apollo GraphQl EsLint Prettier Jest tests Nodemon Styled Components How to
-
github-react-native-apollo-graphql Alpha version coming soon �� This project is under development...
-
我有一个突变，看起来像这样： 它作为传递到我的React组件中。 查看GraphiQL中的API，我看到变异具有以下参数： 我在这里漏掉了什么？
-
我是Apollo/GraphQL的新手，我正试图在一个新建项目中正确地完成身份验证。我的身份验证提供程序是AWS。我编写了一个cognito helper模块来与它交互。 虽然我不太确定如何同步我的apollo客户端与我的auth状态。 现在，我只是通过在react组件处理程序中调用这些函数来处理我的登录。我配置了一个apollo-link，用于添加auth头。将我的JWT令牌数据注入到后端的上下
-
我按照Apollo的文档在客户端和服务器上设置GraphQL订阅，虽然我已经完成了90%，但我不知道如何设置订阅通道以及如何将突变连接到这些通道，以便每当突变发生时，服务器都会将新数据推送到客户端。（对于内容，我正在制作一个Reddit克隆，人们可以在其中发布主题，其他人可以对其发表评论。所以当你看到“Topics”或“TopicList”时，把它们想象成帖子。） 到目前为止，我已经成功地为订阅设