https://github.com/dalelantowork/nodejs-graphql-crud-react

Simple Full Stack GraphQL API made using Node JS, Apollo and React JS
https://github.com/dalelantowork/nodejs-graphql-crud-react

apollo apollo-client graphql nodejs reactjs

Last synced: 3 days ago
JSON representation

Simple Full Stack GraphQL API made using Node JS, Apollo and React JS

• Host: GitHub
• URL: https://github.com/dalelantowork/nodejs-graphql-crud-react
• Owner: dalelantowork
• Created: 2023-11-17T17:09:10.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2023-11-20T09:04:18.000Z (12 months ago)
• Last Synced: 2023-11-21T08:35:08.552Z (12 months ago)
• Topics: apollo, apollo-client, graphql, nodejs, reactjs
• Language: JavaScript
• Homepage:
• Size: 3.76 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## create new node js project

npm init

## install dependencies

### install apollo-server and graphql core package

npm install apollo-server graphql

### install nodemon

npm install

## update package.json

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "nodemon index.js"

},

## create index.js and server

const { ApolloServer } = require("apollo-server");

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({url}) => {

console.log(`API RUNNING AT ${url}`);

});

## create the schema folder

### create the type-defs and resolvers files

typedefs :

const { gql } = require("apollo-server");

const typeDefs = gql`

  type User {

    id: ID!

    name: String!

    username: String!

    age: Int!

    nationality: String!

  }

  type Query {

    users: [User!]!

  }

`;

module.exports = { typeDefs };

resolvers:

const { UserList } = require("../FakeData");

const resolvers = {

  Query: {

    users() {

      return UserList;

    },

  },

};

module.exports = { resolvers };

### install Apollo GraphQL Extension in VS Code

### run the server

npm run start

## install lodash

npm install lodash --save

### query for get all users

query GetAllUsers {

  users {

    id

    name

    age

    username

    nationality

    friends {

      name

      age

    }

  }

}

### query for get user

query GetUser($userId: ID!) {

  user(id: $userId) {

    id

    name

    username

    age

    friends {

      name

    }

  }

}

variables: 

"userId": 3

### query for get movies

query GetAllMovies {

   movies {

    id

    name

    yearOfPublication

   }

}

### query for get movie

query GetMovie($name: String!) {

  movie(name: $name) {

    id

    name

    yearOfPublication

    isInTheaters

  }

}

variables:

"name": "Avengers Endgame"

## Mutations

### createUser

mutation CreateUser($input: CreateUserInput!) {

  createUser(input: $input) {

    id

    name

    age

  }

}

variables:

"input": {

    "name": "Dale",

    "username":"Daleski",

    "age": 20

  }

  

### updateUser

mutation UpdateUsername($input: UpdateUsernameInput!) {

  updateUsername(input: $input) {

    id

    username

  }

}

variables:

"input": {

    "id": "3",

    "newUsername":"Daleski"

  }

### deleteUser

mutation deleteUser($deleteUserId: ID!) {

  deleteUser(id: $deleteUserId) {

    id

  }

}

variables:

"deleteUserId" : 5

# create new react project

create client folder

npx create-react-app .

## remove git

rm -rf .git

## start new git outside 

git init

## install apollo client

npm install @apollo/client