the-road-to-graphql / fullstack-apollo-react-boilerplate

💥A sophisticated Apollo in React boilerplate project.

fullstack-apollo-react-boilerplate

A full-fledged Apollo Server with Apollo Client starter project with React and Express. Read more about it in this tutorial to build it yourself.

Family of universal fullstack repositories:

Server Applications:

• Node.js with Express + MongoDB
• Node.js with Express + PostgreSQL

Client Applications:

• React Client

Features of Client + Server

• React (create-react-app) with Apollo Client
  • Queries, Mutations, Subscriptions
• Node.js with Express and Apollo Server
  • cursor-based Pagination
• PostgreSQL Database with Sequelize or MongoDB
  • entities: users, messages
• Authentication
  • powered by JWT and local storage
  • Sign Up, Sign In, Sign Out
• Authorization
  • protected endpoint (e.g. verify valid session)
  • protected resolvers (e.g. e.g. session-based, role-based)
  • protected routes (e.g. session-based, role-based)
• performance optimizations
  • example of using Facebook's dataloader
• E2E testing

Installation

• git clone [email protected]:the-road-to-graphql/fullstack-apollo-react-boilerplate.git
• cd fullstack-apollo-react-boilerplate
• npm install
• npm start
• visit http://localhost:3000

See Server Installation instructions in the other GitHub repository.

Want to learn more about React + GraphQL + Apollo?

• Don't miss upcoming Tutorials and Courses
• Check out current React Courses

fullstack-apollo-react-boilerplate's Issues

Login doesn't work on Firefox

Hi all.

A really nice app but unfortunately I get the following error with session on landing page:

My package.json in client folder:
{
"name": "fullstack-apollo-react-boilerplate-project",
"version": "0.1.0",
"author": "Robin Wieruch [email protected] (https://www.robinwieruch.de)",
"dependencies": {
"apollo-cache-inmemory": "^1.3.7",
"apollo-client": "^2.4.4",
"apollo-link": "^1.2.3",
"apollo-link-error": "^1.1.1",
"apollo-link-http": "^1.5.5",
"apollo-link-ws": "^1.0.9",
"apollo-utilities": "^1.0.24",
"graphql": "^14.0.2",
"graphql-tag": "^2.10.0",
"history": "^4.7.2",
"react": "^16.6.0",
"react-apollo": "^2.2.4",
"react-dom": "^16.6.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.0",
"subscriptions-transport-ws": "^0.9.15"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom --passWithNoTests",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

My package.json in server folder:
{
"name": "fullstack-apollo-express-postgresql-boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"engines": {
"node": "10.11.0"
},
"scripts": {
"start": "nodemon --exec babel-node src/index.js",
"test:run-server": "TEST_DATABASE=mytestdatabase npm start",
"test:execute-test": "mocha --require @babel/register 'src/**/*.spec.js'",
"test": "echo "No test specified" && exit 0"
},
"keywords": [],
"author": "Robin Wieruch [email protected] (https://www.robinwieruch.de)",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/node": "^7.0.0",
"@babel/preset-env": "^7.1.6",
"@babel/register": "^7.0.0",
"axios": "^0.18.0",
"chai": "^4.2.0",
"mocha": "^5.2.0",
"nodemon": "^1.18.7",
"morgan": "^1.9.1"
},
"dependencies": {
"apollo-server": "^2.2.3",
"apollo-server-express": "^2.2.3",
"bcrypt": "^3.0.2",
"cors": "^2.8.5",
"dataloader": "^1.4.0",
"dotenv": "^6.1.0",
"express": "^4.16.4",
"graphql": "^14.0.2",
"graphql-iso-date": "^3.6.1",
"graphql-resolvers": "^0.2.2",
"jsonwebtoken": "^8.4.0",
"pg": "^7.6.1",
"sequelize": "^4.41.2",
"uuid": "^3.3.2"
}
}

I'm working with node 8.11.2 on ubuntu 16.04.

Thanks and I'll appreciate any hint.

Renaming routes.js to paths.js for greater clarity.

The current routes.js class only holds constants value for various paths in the application, and thus would make far more sense to be named paths.js.

Unhandled GraphQL subscription error Error: GraphQL error: Cannot return null for non-nullable field Subscription.teamCreated

I'm pulling my hair out with this issue...

I'm using this component:

<ListAllTeamsData
    data={data}
    subscribeToMoreTeams={() => {
        subscribeToMore({
            document: LIST_ALL_TEAMS_SUBSCRIPTION,
            updateQuery: (previousResult, { subscriptionData }) => {
                console.log(previousResult, subscriptionData)
                if (!subscriptionData.data) {
                    return previousResult
                }

                const { teamCreated } = subscriptionData.data

                return {
                    ...previousResult,
                    teams: [
                        ...previousResult.teams,
                        teamCreated.team
                    ],
                }
            },
        })
    }}
/>

And the scema:

export const LIST_ALL_TEAMS_SUBSCRIPTION = gql`
    subscription {
        teamCreated {
            team {
                name
                id
                status
                mobile
            }
        }
    }
`

It works fine when I run the subscription in the GraphQL playground, but I get the error in the app. I have no idea why. Any help? It won't even hit the console.log so there seems to be something wrong with 'document: LIST_ALL_TEAMS_SUBSCRIPTION', but from what I can tell it's all fine.

Landing Page erroring out with undefined session

installed fullstack-apollo-express-postgresql-boilerplate with empty database.
installed this program (I did update the packages via a npm upgrade first).

it appears that the code doesn't expect a undefined session, and has no error checking to handle it.

I see the following on my graphql. (it shouldn't return any, it's empty)

Executing (default): SELECT "id", "text", "createdAt", "updatedAt", "userId" FROM "messages" AS "message" ORDER BY "message"."createdAt" DESC LIMIT 101; POST /graphql 200 40.866 ms - 405 POST /graphql 400 1.410 ms - - POST /graphql 400 2.909 ms - -

ENVs

We have "env.local" in our gitignore file, but the app isn't using ENVs. For example, the GraphQL url is hardcoded.

Better Pagination

Was wondering how to get the previous page for given edges? Total count might make sense as well.

400 Error

When connecting this client application to the Postgres application, I get the following error:

ApolloError.js:58 Uncaught (in promise) Error: Network error: Response not successful: Received status code 400 at new ApolloError (ApolloError.js:58) at Object.error (QueryManager.js:388) at notifySubscription (Observable.js:157) at onNotify (Observable.js:196) at SubscriptionObserver.error (Observable.js:253) at Object.error (index.js:77) at notifySubscription (Observable.js:157) at onNotify (Observable.js:196) at SubscriptionObserver.error (Observable.js:253)