Giter VIP home page Giter VIP logo

the-road-to-graphql / fullstack-apollo-react-boilerplate Goto Github PK

View Code? Open in Web Editor NEW
146.0 7.0 40.0 1.78 MB

๐Ÿ’ฅA sophisticated Apollo in React boilerplate project.

Home Page: https://roadtoreact.com

License: MIT License

HTML 7.64% JavaScript 92.36%
react reactjs react-apollo react-apollo-graphql apollographql apollo-client apollo-server apollo-server-express authentication authorization

fullstack-apollo-react-boilerplate's Introduction

The Road to GraphQL [Book]

Slack

Official repository for The Road to GraphQL. If you want to leave a review, please do it on Amazon or Goodreads.

Translations of the book into Github

The Road to GraphQL is also available in other languages. Thanks for all translators for their awesome work!

Updates, Help and Support

Contribute

You can help to improve the book by opening Issues and Pull Requests (PR).

You can open up any PR that corrects spelling or explains a certain lesson with more detail. When writing such a technical book, you get fast blind on what needs more explanation and on what is already explained well.

In addition, you can open Issues when you run into problems. In order to make the fix for the Issue as easy as possible, please provide a couple of details such as error log, screenshot, which page of the book it happened, your node version (command line: node -v) and a link to your own repository. Not all of these details are mandatory, but most of them help to fix the Issue and to improve the book.

Thanks a lot for your help!

fullstack-apollo-react-boilerplate's People

Contributors

greenkeeper[bot] avatar hyperwidget avatar rwieruch avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

fullstack-apollo-react-boilerplate's Issues

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.

Better Pagination

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

ENVs

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

Login doesn't work on Firefox

Hi all.

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

screenshot from 2018-12-31 17-33-21

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.

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 - -

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.