graphql-boilerplates / react-fullstack-graphql Goto Github PK

I've cloned the repository and run subscriptions-with-apollo-worldchat example with a Graphcool testing server (you can test it with serviceID: cjatez8yz0ru30140145a694b).

Reproduce error:

• After cloning the project, I created a Graphcool server and had it running with serviceID: cjatez8yz0ru30140145a694b
• Then I added it to serviceID of src/components/App.js
• Install dependencies with npm install, then start with npm start.
• The first error I received when running the project is about missing subscription-transport-ws dependency which is used by apollo-link-ws. I installed it and the error disappears.
• The second error was when the application is running, in the console there was an warning: WebSocket connection to 'wss://subscriptions.graph.cool/v1/cjatez8yz0ru30140145a694b' failed: WebSocket is closed before the connection is established.
• I used the application to save a new message to the server, it works, but the subscription was broken. And the mutation things were broken as well when I refreshed the page.

Executing graphql create graphcool --boilerplate react-fullstack-basic results in Couldn't find graphcool.yml file. Are you in the right directory? and Cannot read property 'httpEndpoint' of undefined.

All projects based on create-react-app support the use of a central .env file with all environment specific settings like graphcool project id, auth0 domain and client id.

Centralizing these environment variables makes it easier to use these examples as a starting point to connect to your own environment.

I am trying to do infinite scroll with graphcool and flat list for react native. an example would be nice

While recently adding new features to the basic implementation, I realized that making a change the server implementation would constitute the same change reflected across other basic boilerplate server implementations.

That's when it hit me that currently you can choose the react-fullstack-basic but you cannot choose the server implementation (TypeScript, Node). It seems more efficient to make the front-end applications reliant on the server implementations. As opposed to nesting the server implementation with the front-end boilerplate.

I get this error

Error: The following option is not recognized: template
Use graphcool init --help to see a list of all possible options.

$ graphcool version
1.3.7

This project currently uses React Router 4, however, the Relay Modern documentation says you should not use RR4 with it.

https://facebook.github.io/relay/docs/routing.html

The component-based approach of React Router v4 does not readily allow for aggregating the data requirements for nested routes, and as such does not readily permit an approach that will avoid request waterfalls from nesting QueryRenderer components.

Found
Found offers integration with Relay Modern and Relay Classic via Found Relay. Found Relay runs queries for matched routes in parallel, and supports fetching Relay data in parallel with downloading async bundles from code splitting when using Relay Modern.

The readme doesn't contain the step to add clientId and domain form Auth0 to ./src/components/app.js.

Hi I'm having difficulties achieving a solution where the user will get redirected directly to the ListPage after logging in, without the login button rendering for a few milliseconds.

I believe it has something to do with:

_isLoggedIn = () => {
    return this.props.data.user;
}

.. not having received the data directly after logging in.

How would I achieve a solution where the app waits rendering until this.props.data.user is true?

This example is based on https://graphqlbin.com/insta-auth0.graphql, but the required field emailAddress in that schema breaks this project. Either the wrong schema is in the readme, or this example needs a different one.

When doing a yarn install, I get the following error...

error Couldn't find a package.json (or bower.json) file in /Users/CG/dev/react-graphql/quickst
art-with-apollo/node_modules/fsevents/node_modules/node-pre-gyp

I even tried to install the dependency specifically...

➜  quickstart-with-apollo git:(master) ✗ yarn
yarn install v0.16.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning Unmet peer dependency "redux@^2.0.0 || ^3.0.0".
warning Unmet peer dependency "graphql@^0.9.x".
error Couldn't find a package.json (or bower.json) file in /Users/CG/dev/react-graphql/quickst
art-with-apollo/node_modules/fsevents/node_modules/node-pre-gyp
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
➜  quickstart-with-apollo git:(master) ✗ npm install fsevents --save

> [email protected] install /Users/CG/dev/react-graphql/quickstart-with-apollo/node_modules/fseve
nts
> node install

[fsevents] Success: "/Users/CG/dev/react-graphql/quickstart-with-apollo/node_modules/fsevents/
lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
npm notice created a lockfile as package-lock.json. You should commit this file.
added 113 packages, removed 930 packages and updated 2 packages in 39.264s
➜  quickstart-with-apollo git:(master) ✗ yarn
yarn install v0.16.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning Unmet peer dependency "redux@^2.0.0 || ^3.0.0".
warning Unmet peer dependency "graphql@^0.9.x".
error Couldn't find a package.json (or bower.json) file in /Users/CG/dev/react-graphql/quickst
art-with-apollo/node_modules/fsevents/node_modules/node-pre-gyp
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
➜  quickstart-with-apollo git:(master) ✗

I'm having trouble making it work. following the instructions i get this error response which is difficult to debug

Unhandled (in react-apollo) Error: GraphQL error: Cannot return null for non-nullable type (line 3, column 5):
    id
    ^

followed by this error

DOMException: Failed to execute 'postMessage' on 'Window': Error: GraphQL error: function execution error: An unexpected error occured during authentication. could not be cloned.

When running the code, after creating an account/client with Auth0, the result of signing up and completing the form is a redirect back to login.

The error is thrown in the catch part below of CreateUser, in the createUser function
this.props.createUser({ variables })
.then((response) => {
this.props.history.replace('/')
}).catch((e) => {
console.error(e)
this.props.history.replace('/')
})

with error:
CreateUser.js:80 Error: GraphQL error: The provided idToken is invalid. Please see https://auth0.com/docs/tokens/id_token for how to obtain a valid idToken
at new ApolloError (apollo.umd.js:2075)
at apollo.umd.js:2798
at

I tried to follow the directions from the README and when I got to yarn start I got the following:

$ yarn start
yarn run v1.3.2
warning package.json: No license field
$ graphcool deploy && node src/index.js
? Please choose the cluster you want to deploy to 

local
You chose the cluster local, but don't have docker initialized, yet.
Please run $ graphcool local up to get a local Graphcool cluster.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

No problem! ...

$ graphcool local up
 ▸    local up is not a graphcool command.
 ▸    Perhaps you meant local upgrade
 ▸    Run graphcool help local for a list of available commands.

Get in touch if you need help: https://www.graph.cool/forum
To get more detailed output, run $ export DEBUG="*"

Wait what?
that's graphql-cli 2.9.4
graphcool 1.0.0-beta3.3.1

There needs to be a:
yarn relay

to create those files.
(It is also possible there needs to be a yarn global add relay-compiler, I have it installed globally already so not sure if it is problem.)

You should mention that Yarn is required

This piece of code seems to result a warning:

const store = createStore(
  combineReducers({
    filter,
    apollo: client.reducer(),
  }),
  applyMiddleware(client.middleware()),
  window.devToolsExtension ? window.devToolsExtension() : f => f
)

warning.js:14 The previous state received by the reducer has unexpected type of "Function". Expected argument to be an object with the following keys: "filter", "apollo"

Passing an empty object as a second argument to createStore fixes this:

const store = createStore(
  combineReducers({
    filter,
    apollo: client.reducer(),
  }),
  {}, // <- this one
  applyMiddleware(client.middleware()),
  window.devToolsExtension ? window.devToolsExtension() : f => f
)

Not submitting a PR because I'm not 100% sure in my conclusions.

apparently the current code only works with RR3.

Hey whats up! It seems like graphcool-examples/react-graphql@563004c doesn't fully address related issue #21 and commit 8413895. While the updated readme does remove the 'email' field, which is preventing the email auth provider from properly enabling, the given schema at https://graphqlbin.com/insta-email.graphql still contains the troublesome 'email' field

File: https://github.com/graphcool-examples/react-graphql/blob/master/authentication-with-auth0-and-apollo/README.md

README says to do:

git clone https://github.com/graphcool-examples/react.git

Needs to be updated to:

git clone https://github.com/graphcool-examples/react-graphql.git

I have error
"yarn run v1.3.2
error Command "start" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command."
Please help me!

In authentication-with-email-and-apollo:

I've noticed that in the front-end related graphql-boilerplates, we are asking users to start the front-end application and open another tab to start the server.

I propose we change the scripts in these repositories to use nodemon and start both the front-end and server applications through the start script. In addition, we could create a start:server and start:application (or start:app, start:frontend) scripts to start the individual pieces.

This affords the user the ability to start quicker, and the server to still pick up changes on save.

"Copy the Relay API endpoint to ./src/app.js" should be "Copy the Relay API endpoint to ./src/index.js"

In step 6 Copy Relay API endpoint to ./src/… the tutorial asks you to cd to graphcool in a previous step, so . actually needs to be ..

After logging in with Auth0 on http://apollo-auth0.netlify.com/, I'm redirected to the homepage where the Login button and message still show.

Console log:

Error: GraphQL error: The provided idToken is invalid. Please see https://auth0.com/docs/tokens/id_token for how to obtain a valid idToken
    at new t (main.9f08045f.js:11)
    at main.9f08045f.js:11
    at <anonymous>

TypeError: Cannot read property 'loading' of undefined

having issues with https://github.com/graphcool-examples/react-graphql/tree/master/authentication-with-email-and-apollo

i am not sure how App component passes down props to CreateLogin.
i am getting undefined out of this.props.data.loading at

  render () {
    if (this.props.data.loading) {
...

I decided to rebuild the project and got this error. How to fix?

 ~/authentication-with-facebook-and-apollo/server  graphcool deploy export DEBUG="*"                                                                          ✔  4539  20:26:55
  config CWD /Users/xyz/authentication-with-facebook-and-apollo/server +0ms
  config HOME /Users/xyz +3ms
  config definitionDir /Users/xyz/authentication-with-facebook-and-apollo/server +0ms
  config definitionPath /Users/xyz/authentication-with-facebook-and-apollo/server/graphcool.yml +0ms
  config homepath /Users/xyz/.graphcoolrc +0ms
  config localRCPath /Users/xyz/authentication-with-facebook-and-apollo/server/.graphcoolrc +0ms
  config globalRCPath /Users/xyz/.graphcoolrc +0ms
  cli command id deploy:export +0ms
  cli:plugincache Got plugin from cache +0ms
  cli:plugincache /Users/xyz/Library/Caches/graphcool/plugins.json +0ms
  cli:plugincache Got plugin from cache +2ms
  cli:plugincache /Users/xyz/Library/Caches/graphcool/plugins.json +0ms
  plugins findCommand graphcool-cli-core +0ms
  cli:plugincache Got plugin from cache +4ms
  cli:plugincache /Users/xyz/Library/Caches/graphcool/plugins.json +10ms
  cli:plugincache Got plugin from cache +1ms
  cli:plugincache /Users/xyz/Library/Caches/graphcool/plugins.json +0ms
  plugins findCommand graphcool-cli-core +14ms
  plugin requiring command +0ms
  cli-engine:plugins:manager requiring /usr/local/lib/node_modules/graphcool/node_modules/graphcool-cli-core +0ms
  cli-engine:plugins:manager required +631ms
  plugin required command +635ms
  deploy run +0ms
? Please choose the cluster you want to deploy to (Use arrow keys)

  Shared Clusters:
❯ shared-eu-west-1
  shared-ap-northeast-1
  shared-us-west-2

  Local (docker):
  local YAMLException: duplicated mapping key at line 25, column -607:
    functions:
    ^
    at generateError (/usr/local/lib/node_modules/graphcool/node_modules/js-yaml/lib/js-yaml/loader.js:165:10)
    at throwError (/usr/local/lib/node_modules/graphcool/node_modules/js-yaml/lib/js-yaml/loader.js:171:9)
    at storeMappingPair (/usr/local/lib/node_modules/graphcool/node_modules/js-yaml/lib/js-yaml/loader.js:308:7)
    at readBlockMapping (/usr/local/lib/node_modules/graphcool/node_modules/js-yaml/lib/js-yaml/loader.js:1071:9)
    at composeNode (/usr/local/lib/node_modules/graphcool/node_modules/js-yaml/lib/js-yaml/loader.js:1332:12)
    at readDocument (/usr/local/lib/node_modules/graphcool/node_modules/js-yaml/lib/js-yaml/loader.js:1492:3)
    at loadDocuments (/usr/local/lib/node_modules/graphcool/node_modules/js-yaml/lib/js-yaml/loader.js:1548:5)
    at load (/usr/local/lib/node_modules/graphcool/node_modules/js-yaml/lib/js-yaml/loader.js:1569:19)
    at Object.safeLoad (/usr/local/lib/node_modules/graphcool/node_modules/js-yaml/lib/js-yaml/loader.js:1591:10)
    at ProjectDefinitionClass.<anonymous> (/usr/local/lib/node_modules/graphcool/node_modules/graphcool-cli-engine/src/ProjectDefinition/ProjectDefinition.ts:166:23)
    at step (/usr/local/lib/node_modules/graphcool/node_modules/graphcool-cli-engine/dist/ProjectDefinition/ProjectDefinition.js:32:23)
    at Object.next (/usr/local/lib/node_modules/graphcool/node_modules/graphcool-cli-engine/dist/ProjectDefinition/ProjectDefinition.js:13:53)
    at /usr/local/lib/node_modules/graphcool/node_modules/graphcool-cli-engine/dist/ProjectDefinition/ProjectDefinition.js:7:71
    at Promise (<anonymous>)
    at __awaiter (/usr/local/lib/node_modules/graphcool/node_modules/graphcool-cli-engine/dist/ProjectDefinition/ProjectDefinition.js:3:12)
    at ProjectDefinitionClass.checkNodeModules (/usr/local/lib/node_modules/graphcool/node_modules/graphcool-cli-engine/dist/ProjectDefinition/ProjectDefinition.js:177:16)
Exiting with code: 1

After doing the (awesome) onboarding tutorial on the Web Console and running the (autogenerated) react-apollo-instagram-example app, I got this error on the ListPage route:

Unhandled (in react-apollo) Error: GraphQL error: Argument 'orderBy' expected type 'PostOrderBy' but got: createdAt_DESC. Reason: Enum value 'createdAt_DESC' is undefined in enum type 'PostOrderBy'. Known values are: description_ASC, description_DESC, id_ASC, id_DESC, imageUrl_ASC, imageUrl_DESC. (line 2, column 21):
  allPosts(orderBy: createdAt_DESC) {

Not sure if I missed something during setting up the project. The field createdAt is predefined and hidden in the schema, so it should exist I think 🤔

While cleaning up the basic boilerplate, I realized there are a few features that might benefit others:

• Add an "All Posts" page and relevant query
• Edit a draft
• Unpublish a published post
• 404 page

Throws an error regarding undefined variables

yarn build v0.24.6
$ node scripts/build.js 
Creating an optimized production build...
Failed to compile.

./src/CreatePostMutation.js
  Line 49:  'viewerId' is not defined  no-undef
  Line 61:  'viewerId' is not defined  no-undef

Search for the keywords to learn more about each error.

error Command failed with exit code 1.

I'd like an example with Angular and authentication, either with Auth0 or standard email and Facebook OAuth

Thanks

maybe video training "How To Graphcool Authentication with angular2 or 4" with code example

auth0 apollo example fails at login. Previous issues indicate that HS256 is the problem, i've changed that already. Here is the error message:

CreateUser.js:80 Error: GraphQL error: The provided idToken is invalid. Please see https://auth0.com/docs/tokens/id_token for how to obtain a valid idToken

I noticed in LoginAuth0.js file that authResult returns a accessToken but idToken, idTokenPayload, and refreshToken, are all undefined.

Does anyone else have this issue? what am I doing wrong? I did not make any other changes

The creatuser.js code on github doesnt match with the tutorials code

I configure the file system authorization according to the steps in this tutorial

and get an error:
"Given URL is not whitelisted in Client OAuth Settings: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs."

How do I fix this?

In Getting Started > Clone example repository you have:

git clone https://github.com/graphcool-examples/react.git

This should be:

git clone https://github.com/graphcool-examples/react-graphql.git

I was trying to follow the tutorial for the authentication at https://www.graph.cool/docs/tutorials/auth/authentication-with-facebook-for-react-and-apollo-yi9jeuwohl#getting-started.

Unfortunately, I am stuck in the step 18, where I see the error as such:

Has anyone bumped into this error and managed to resolve it?

This is my App.js:

/*global FB*/

import React from 'react';
import { withRouter } from 'react-router';
import ListPage from './ListPage';
import NewPostLink from './NewPostLink';
import { gql, graphql } from 'react-apollo';

const FACEBOOK_APP_ID = '__MY_APP_ID__';
const FACEBOOK_API_VERSION = 'v2.10';

class App extends React.Component {
    componentDidMount() {
        this._initializeFacebookSDK();
    }

    _initializeFacebookSDK() {
        window.fbAsyncInit = function() {
            FB.init({
                appId: FACEBOOK_APP_ID,
                cookie: true, // enable cookies to allow the server to access the session
                version: FACEBOOK_API_VERSION, // use Facebook API version 2.10
            });
        };

        // Load the SDK asynchronously
        (function(d, s, id) {
            var js,
                fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s);
            js.id = id;
            js.src = '//connect.facebook.net/en_US/sdk.js';
            fjs.parentNode.insertBefore(js, fjs);
        })(document, 'script', 'facebook-jssdk');
    }

    _handleFBLogin = () => {
        FB.login(
            response => {
                console.log(response);
                this._facebookCallback(response);
            },
            { scope: 'public_profile,email' }
        );
    };

    _facebookCallback = async facebookResponse => {
        if (facebookResponse.status === 'connected') {
            const facebookToken = facebookResponse.authResponse.accessToken;
            const graphcoolResponse = await this.props.authenticateUserMutation(
                { variables: { facebookToken } }
            );
            const graphcoolToken =
                graphcoolResponse.data.authenticateUser.token;
            localStorage.setItem('graphcoolToken', graphcoolToken);
            window.location.reload();
        } else {
            console.warn(`User did not authorize the Facebook application.`);
        }
    };

    _isLoggedIn = () => {
        return false;
    };

    _logout = () => {
        localStorage.removeItem('graphcoolToken');
        window.location.reload();
    };

    render() {
        if (this._isLoggedIn()) {
            return this.renderLoggedIn();
        } else {
            return this.renderLoggedOut();
        }
    }

    renderLoggedIn() {
        return (
            <div>
                <span>Logged in as ${this.props.data.loggedInUser.id}</span>
                <div className="pv3">
                    <span
                        className="dib bg-red white pa3 pointer dim"
                        onClick={this._logout}
                    >
                        Logout
                    </span>
                </div>
                <ListPage />
                <NewPostLink />
            </div>
        );
    }

    renderLoggedOut() {
        return (
            <div>
                <div className="pv3">
                    <div>
                        <span
                            onClick={this._handleFBLogin}
                            className="dib pa3 white bg-blue dim pointer"
                        >
                            Log in with Facebook
                        </span>
                    </div>
                    <span>Log in to create new posts</span>
                </div>
                <ListPage />
            </div>
        );
    }
}

const AUTHENTICATE_FACEBOOK_USER = gql`
    mutation AuthenticateUserMutation($facebookToken: String!) {
        authenticateUser(facebookToken: $facebookToken) {
            token
        }
    }
`;

export default graphql(AUTHENTICATE_FACEBOOK_USER, {
    name: 'authenticateUserMutation',
})(withRouter(App));

The current Auth0-react examples leave a lot to be desired for solid authentication. This example: https://auth0.com/blog/reactjs-authentication-tutorial/ follows a better approach. If that approach can be adopted, then these examples can be a real boilerplate for a new app.

after run yarn in quickstart-with-relay I get following question:

warning Lockfile has incorrect entry for "[email protected]". Ignoring it.
Couldn't find any versions for "react-relay" that matches "1.0.1-alpha.2"
? Please choose a version of "react-relay" from this list:

first I download this project from https://serverless-github-example-proxy.s3.amazonaws.com/ after tutorial with same issue

right now the TodoApp component defines a lot of queries/mutations and passes them together with loading/refetch down to child components. All of these should be pushed down to the child components rather.

npm install fails with no compatible version found because it's trying to get alpha version of relay

Hey there! I just started using Apollo/GraphQL a couple of days ago, and I'm just a little confused as to how to go about making the corresponding UI component more reactive.

I see there's a manual refetch call after the addTodoMutation is invoked, but I'm wondering what should be done here if the payloads become larger and larger (and a full refresh isn't tenable). I'm looking into updateQueries but have had no luck with it...not to mention the documentation for Apollo says it's generally smart enough to force a rerender on the corresponding UI components.

Any guidance in this would be greatly appreciated! Thank you!

Hi !
Thanks for all examples! Very Useful!
I have installed 10 days agoo example: https://github.com/graphcool-examples/react-graphql/tree/master/subscriptions-with-apollo-worldchat it was working fine.
Today, I try to install it again, and I get this issue:

You are referencing a node that does not exist. Please check your mutation to make sure you are only creating edges between existing nodes. Id if available: cj90ba3com5hd013965pytw2t

I used Graphcool CLI with npm install -g graphcool@next
Thanks for your help

yarn start
yarn run v1.3.2
warning package.json: No license field
$ node src/index.js
etc etc.../my-app/server/src/index.js:55
    ...req,
    ^^^

SyntaxError: Unexpected token ...
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3
error Command failed with exit code 1.

and:

node -v
v8.1.4

via nvm:

which node
/Users/etc etc/.nvm/versions/node/v8.1.4/bin/node

Thanks.

Hello,

I'm running Parse as my server, I'm not sure if I need graphql beside Parse or not!

Here I found a sample of it : https://github.com/nnance/f8app-apollo !

What's your idea ?

Thanks

Hi, for the auth-apollo tutorial I want to associate the user with posts the user creates. I can access userId from createUser response. However in the event that the user already exists I only have access to the token not the graphcool user id. How should I approach this?