Apollo 4 Express setup with Apollo 3 React and Ant Design
- Provide a 2023 Q1 boilerplate Apollo server 4 and client 3 using Express and React
- There are 0 npm vulnerabilities as of this writing
- Nicely linted with
StandardJS
, and code spacing to allow you to expand upon.
- Contains
cors
andhelmut
- Has directive for date fields called
@date
to format date strings with option to usedayjs
'sfromNow
- Has directive for queries/mutations resolvers called
@authenticated
that passesuser
object into resolver context or throw an error if!user
(not enabled, code is commented for you) - Contains
Joi
validation examples - Has resolver for GitHub
users/${org}/repos
- Has health-check for GraphQL resolver
ping
- Contains
ExpressJS
routing example - Has health-check for HTTP GET route
localhost/ping
- Contains connection to
Apollo Server 4
- configured
fetchPolicy
's - Extended to parse to easily add headers in requests; example,
Authentication: "Bearer xyz"
- Extended to parse and display GraphQL and Network errors so you can expand
Ant Design
is installed with useful examples- Examples of Apollo
useQuery
and field directive use for@date
- When listing GitHub repositories, UI contains click-to-copy example (for cloning repo)
- configured
App
>Home
includes components forGithubListRepositories
andPingResults
. Each of these uses APIuseQuery
to GraphQL API
clone repo
git clone git@github.com:nodejavascript/apollo-boiler-client.git
Before proceeding, please note: Run server before client or you will get GraphqlClient errorLink networkError TypeError: Failed to fetch
errors in the console.
- in
server
terminal
cd server/
cp .env.example .env
nano .env
-
update & save
GITHUB_TOKEN
(in .env) with your Personal access token. See GitHub here -
run
npm install
npm start
- example in console if running:
development 4014 - startup, 03/30/2023 2:22 PM, v0.0.1
http://localhost:4014/ping
- in
client
terminal
cd client/
cp .env.example .env
nano .env
-
update & save
REACT_APP_GITHUB_ORG
to the GitHubusername
to want to query -
run
npm install
npm start
This should open a new browser tab and display the page (see below screenshot)
- Using
StandardJS
for syntax
-
query queryListRepositories { listRepositories ( listRepositoriesInput: { org: "nodejavascript" } ) { id name full_name description size html_url ssh_url updated: updated_at updatedAgo: updated_at (format: "fromNow") owner { login avatar_url } } }
- ```
query queryPing {
ping {
timestamp
version
}
}