leveluptuts / fullstack-graphql-apollo-react-meteor Goto Github PK
View Code? Open in Web Editor NEWA fullstack app tutorial for GraphQL using Apollo, React & Meteor
A fullstack app tutorial for GraphQL using Apollo, React & Meteor
It seems like you have folders for the rest of the videos in the series, but I am unable to find the folder for the "End of #9". This video is titled "Object Queries".
Hi Scott! I've made some additions to "End of #27" to add subscriptions and some other features (optimistic UI, fragments, etc.). I've got it ready as a PR for the repo but do not yet have permission to submit it. Is there a procedure I can use to request permission to submit a PR?
I just cloned the repo cd
into end of #2
ran meteor
and it errors out.
=> Started MongoDB.
/fullstack-graphql-apollo-react-meteor/end of
#2/.meteor/local/build/programs/server/boot.js:467
W20180103-16:10:49.482(5)? (STDERR) }).run();
W20180103-16:10:49.482(5)? (STDERR) ^
W20180103-16:10:49.482(5)? (STDERR)
W20180103-16:10:49.483(5)? (STDERR) Error: The babel-runtime npm package could not be found in your node_modules
W20180103-16:10:49.483(5)? (STDERR) directory. Please run the following command to install it:
W20180103-16:10:49.483(5)? (STDERR)
W20180103-16:10:49.483(5)? (STDERR) meteor npm install --save babel-runtime
W20180103-16:10:49.484(5)? (STDERR)
W20180103-16:10:49.484(5)? (STDERR) at babel-runtime.js (packages/babel-runtime.js:36:9)
W20180103-16:10:49.484(5)? (STDERR) at fileEvaluate (packages/modules-runtime.js:343:9)
W20180103-16:10:49.484(5)? (STDERR) at require (packages/modules-runtime.js:238:16)
W20180103-16:10:49.484(5)? (STDERR) at packages/babel-runtime.js:155:15
W20180103-16:10:49.484(5)? (STDERR) at packages/babel-runtime.js:166:3
I don't use meteor so not much Idea what to do here.
The http://localhost:3000/graphql endpoint returns a 400 Bad Request for cloned sections 4,5 and 6.
Follow the tutorial and got a blank page. I get a few error messages on the browser that go like this:
Uncaught TypeError: cache.transformDocument is not a function
I also tried to incorporate this into my app that uses react-router to route pages, so I create a "TestPage" component and tried using it to demo the calls to graphql server and the results were blank, again. This time the message was as follows:
`
The above error occurred in the component:
in Query (created by Apollo(TestPage))
in Apollo(TestPage) (created by Context.Consumer)
in Route (created by App)
in Switch (created by App)
in div (created by App)
in Router (created by HashRouter)
in HashRouter (created by App)
in App (created by ApolloApp)
in ApolloProvider (created by ApolloApp)
in ApolloApp
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
`
I also tried cloning the git repo and use the examples and they also returned a blank page.
Great tutorial and examples but those tiny details ruined it for me.
Hello!
During lesson 15 I believe to have followed all the instructions correctly, but when I try to create a user, I get the following errors, both on terminal and browser:
/home/barbier/.meteor/packages/meteor-tool/.1.6.1.ovpzey.y0lrn++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/bin/node: symbol lookup error: /home/barbier/Documents/Projetos/leveluptuts-meteor/node_modules/bcrypt/lib/binding/bcrypt_lib.node: undefined symbol: _ZN4node19GetCurrentEventLoopEPN2v87IsolateE => Exited with code: 127 => Your application is crashing. Waiting for file change.
SyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data - socket-stream-client.js:2810:20 Source map error: SyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data
My Component code:
import { Accounts } from "meteor/accounts-base"
export default class RegisterForm extends React.Component {
registerUser = e => {
e.preventDefault()
Accounts.createUser(
{
email: this.email.value,
password: this.password.value,
},
error => {
console.log(`Error registering user: ${error}`)
}
)
}
render() {
return <form onSubmit={this.registerUser}>
<input
type="email"
ref={input => this.email = input}
placeholder="Your email"
/>
<input
type="password"
ref={input => this.password = input}
placeholder="Desired password"
/>
<button type="submit">Register User</button>
</form>
}
}```
Can you help me?
Hi @leveluptuts, I found a good way to modularize the API codes. I suggest you use bundle
from graphql-modules
. Take a look at my code https://bitbucket.org/raphox/react-fullstack/src/master/imports/api/
The main code:
// resolutions.js
...
const schema = `
type Resolution {
_id: String
name: String
author: Author
}
`;
export const queries = `
resolutions: [Resolution]
resolution(_id: String): Resolution
`;
export const mutations = `
createResolution(name: String!): Resolution
removeResolution(_id: String!): Resolution
`;
const resolvers = {
queries: {
resolutions() {
...
},
mutations: {
createResolution(obj, { name }, context) {
...
},
Resolution: {
author(resolution) {
return Authors.findOne(resolution.author);
}
}
}
export default () => ({
schema,
queries,
mutations,
resolvers,
modules: [authors]
});
// register-api.js
import resolutions from '../../api/resolutions';
const modules = [resolutions];
const schema = makeExecutableSchema(bundle(modules));
createApolloServer({
schema
});
I still need to finalize the implementation, but I can already work with multiple queries, schemas and mutations.
Thank you for the great tutorial!
In [https://www.leveluptutorials.com/tutorials/full-stack-graphql-with-apollo-meteor-and-react/creating-our-apollo-graphql-server] you mentioned code to add dependencies but I can't find them anywhere. Its supposed to be
npm install --save add apollo-client graphql-server-express express graphql graphql-tools body-parser
.
I'm trying to expand on the API structure by creating a folder for a list type. But when I create a new type Mutation and import it into register-api, I get this: "Error: Type 'Mutation' was defined more than once." How would you fix this?
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.