graphql-boilerplates / react-fullstack-graphql Goto Github PK
View Code? Open in Web Editor NEWStarter projects for fullstack applications based on React & GraphQL.
Starter projects for fullstack applications based on React & GraphQL.
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.
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!
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
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) {
...
npm install fails with no compatible version found because it's trying to get alpha version of relay
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
apparently the current code only works with RR3.
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
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
I am trying to do infinite scroll with graphcool and flat list for react native. an example would be nice
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.
maybe video training "How To Graphcool Authentication with angular2 or 4" with code example
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?
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
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
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
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
"Copy the Relay API endpoint to ./src/app.js" should be "Copy the Relay API endpoint to ./src/index.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?
You should mention that Yarn is required
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?
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.
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.
The creatuser.js code on github doesnt match with the tutorials code
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.
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
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
.
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
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.
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.
The readme doesn't contain the step to add clientId and domain form Auth0 to ./src/components/app.js.
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.)
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 ..
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.
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 🤔
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) ✗
While cleaning up the basic
boilerplate, I realized there are a few features that might benefit others:
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
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!
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));
I've cloned the repository and run subscriptions-with-apollo-worldchat example with a Graphcool testing server (you can test it with serviceID: cjatez8yz0ru30140145a694b
).
cjatez8yz0ru30140145a694b
serviceID
of src/components/App.js
npm install
, then start with npm start
.subscription-transport-ws
dependency which is used by apollo-link-ws
. I installed it and the error disappears.WebSocket connection to 'wss://subscriptions.graph.cool/v1/cjatez8yz0ru30140145a694b' failed: WebSocket is closed before the connection is established.
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.
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>
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.