Giter Club home page Giter Club logo

fullstack-graphql's Introduction

Fullstack GraphQL

Learn how to use GraphQL with Node and React

This repository contains code used in two Frontend Masters courses: Server-Side GraphQL in Node.js and Client-Side GraphQL in React

What you'll need

  • Node version 8.17.0

Client-Side GraphQL in React

After cloning the repository, make sure to switch to the client branch before running the application:

git clone https://github.com/FrontendMasters/fullstack-graphql.git
git checkout client --
npm install
npx yarn app

Solutions

The solution branch has the completed course fo reference. There is no one way to finish this course. git checkout solution

fullstack-graphql's People

Contributors

dtauer avatar hendrixer avatar zashishz 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fullstack-graphql's Issues

Doubt using graphql type resolvers for more than one query

Hi scott , my name is rakshith and i had attended your server side graphql in nodejs online course on frontend masters. I had this doubt on resolvers.

There are 2 object types -

User { email , name, post : Post}

Post {body, user: User }

I have 2 mutations - addPost and deletePost

I have written a resolver to addPost , basically it creates a new post in collection. Then i used the type resolver user from post type to fetch user data.

Now in the 2 mutation deletePost . I have written a resolver to delete a post using the id, and i am then trying to use the type resolver from post type that is user to remove the reference of tht post from the user.

The problem here is.. the type resolver user is already fetching me a user data for the earlier addPost mutation. How will i tell it to only run a query that would delete the reference from the user, and not fetch a user?

Learning Path Completion Rate is off

I have noticed that the completion rate in the home page is often not accurate. I believe that the completion level for a course get carried over to the main page. Once you refresh the page, it gets back to normal. I was just what was the cause?

Running the App in the Browser

So far-
Forked and cloned the App. Set it up through zsh terminal. Went into VS Code.
Tried running Yarn on the project. Yarn lock existed. SO eventually deleted lock. Then ran Yarn again. Got node modules and new yarn lock. Then Yarn app. Received Localhost:1234 running. Nothing showed on browser. cd into client and tried tried again on new port. still nothing. Either I'm doing something wrong. I'm studying the follow along, file structure looks right. Hmm Help

Unable npm run app

Hi guys, I have been stuck in this issue for quite a while now. I was following the course and after taking down the repo I got this after running npm run app:
Untitled

I have run npm install too.

blank page

I am using npm instead of yarn, so i wrote npm run app in the command line. Eventually the server starts on local host but nothing appears on the page. What is the issue, please?

Error: GraphQL error: Int cannot represent non 32-bit signed integer value: 1672250526945

Running following mutation from https://frontendmasters.com/courses/client-graphql-react/querying-mutations-demo/
image
results in following error Error: GraphQL error: Int cannot represent non 32-bit signed integer value: 1672250526945
image

It looks like graphql server implementation is using Int type instead of Date https://stackoverflow.com/questions/44982279/graphql-large-integer-error-int-cannot-represent-non-32-bit-signed-integer-valu

Unable 'yarn app'

I have found myself in this situation where I can't run yarn app. I have installed all dependencies using yarn install. Can anyone shine some light?
Untitled

error server

error

I can't execute the server could you help me please

I get the error “deasync: command failed” when running “yarn install” on latest node v13.9.0

Hi. I am was using latest node version 13.9.0
When I switched back to LTS (v12.16.1) yarn install finished without errors; so, feel free to close this if it is not a bug.

I think the relevant parts of the error output are:

error /usr/local/src/Frontend Masters/courses/GraphQL/2019-11-25-server-graphql-nodejs/fullstack-graphql/node_modules/deasync: Command failed.
Exit code: 1
Command: node ./build.js
Arguments: 
Directory: /usr/local/src/Frontend Masters/courses/GraphQL/2019-11-25-server-graphql-nodejs/fullstack-graphql/node_modules/deasync

and

make: Entering directory '/usr/local/src/Frontend Masters/courses/GraphQL/2019-11-25-server-graphql-nodejs/fullstack-graphql/node_modules/deasync/build'
  CXX(target) Release/obj.target/deasync/src/deasync.o
g++: error: Masters/courses/GraphQL/2019-11-25-server-graphql-nodejs/fullstack-graphql/node_modules/node-addon-api: No such file or directory
make: *** [deasync.target.mk:109: Release/obj.target/deasync/src/deasync.o] Error 1
make: Leaving directory '/usr/local/src/Frontend Masters/courses/GraphQL/2019-11-25-server-graphql-nodejs/fullstack-graphql/node_modules/deasync/build'
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/home/eze/.config/nvm/13.9.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack     at ChildProcess.emit (events.js:321:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Linux 5.4.17-200.fc31.x86_64
gyp ERR! command "/home/eze/.config/nvm/13.9.0/bin/node" "/home/eze/.config/nvm/13.9.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /usr/local/src/Frontend Masters/courses/GraphQL/2019-11-25-server-graphql-nodejs/fullstack-graphql/node_modules/deasync
gyp ERR! node -v v13.9.0
gyp ERR! node-gyp -v v6.1.0
gyp ERR! not ok 
Build failed

See yarn-install.log for the full output of running yarn install.

console error

Screenshot 2022-11-16 at 1 51 28 PM

having this error in console when querying data from the server. the query runs perfectly but this error has shown when you run it and also the apollo client tool is not showing my resolved query data as before..

Screenshot 2022-11-16 at 1 54 52 PM

only shows this example query data in root types

Unavailable slides

It seems that the link to the slides that is presented in the README.md is obsolete (or the files have actually been removed). Thanks for the rest of the content though !

db.json file contents missing

I'm trying to do the querying problem using the client branch and Apollo is not recognizing the db.json file correctly.

What do I need to do in order to be able to accurately test my queries in apollo dev tools?

image

Querying Data Solution useQuery undefined

Branch: client
According to video, you should use deconstruct for useQuery (const [data, loading, error] = useQuery(ALL_PETS)) but you get undefined on useQuery hook when you do that. If you use something like const pets = useQuery and then pets.loading, pets.data, pets.error it's works.

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.