graphQl עוקף את REST בסיבוב? מדריך GQL

query {
  authors {
    id
    name
    books {
    	name  
    }
  }
}

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon --exec babel-node src/index.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/node": "^7.14.9",
    "@babel/preset-env": "^7.15.0",
    "nodemon": "^2.0.12"
  },
  "dependencies": {
    "express": "^4.17.1",
    "express-graphql": "^0.12.0",
    "graphql": "^15.5.1"
  }
}

const express = require('express');
const app = express();

const expressGraphQL = require('express-graphql').graphqlHTTP;

app.use('/graphql', expressGraphQL({
    graphiql: true
}));

app.listen(5001, () => console.log('codcodile GQL tut is running'))

const express = require('express');
const expressGraphQL = require('express-graphql').graphqlHTTP;

const app = express();

const {
    GraphQLSchema,
    GraphQLObjectType,
    GraphQLString,
    GraphQLList,
    GraphQLInt,
    GraphQLNonNull
} = require('graphql');


const authors = [
    { id: 1, name: 'codcodile baby' },
    { id: 2, name: 'codcodile daddy' },
    { id: 3, name: 'codcodile momi' }
]

const books = [
    { id: 1, name: ' simply dummy text of the printing and typesetting industry. Lorem Ipsum has been ', authorId: 1 },
    { id: 2, name: '1960s with the release of Letraset sheets', authorId: 1 },
    { id: 3, name: 'Harry Potter and the Goblet of Fire', authorId: 1 },
    { id: 4, name: 'popular belief, Lorem Ipsum is not simply random', authorId: 2 },
    { id: 5, name: 'using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content', authorId: 2 },
    { id: 6, name: 'sites still in their infancy. Various versions have evolved over the years, sometimes by accident', authorId: 2 },
    { id: 7, name: 'Latin words, consectetur, from ', authorId: 3 },
    { id: 8, name: 'majority have suffered alteration in some form', authorId: 3 }
];


const BookType = new GraphQLObjectType({
    name: 'Book',
    description: 'This represents a book written by an author',
    fields: () => ({
      id: { type: GraphQLNonNull(GraphQLInt) },
      name: { type: GraphQLNonNull(GraphQLString) },
      authorId: { type: GraphQLNonNull(GraphQLInt) },
      author: {
        type: AuthorType,
        resolve: (book) => {
          return authors.find(author => author.id === book.authorId)
        }
      }
    })
  })
  
  const AuthorType = new GraphQLObjectType({
    name: 'Author',
    description: 'This represents a author of a book',
    fields: () => ({
      id: { type: GraphQLNonNull(GraphQLInt) },
      name: { type: GraphQLNonNull(GraphQLString) },
      books: {
        type: new GraphQLList(BookType),
        resolve: (author) => {
          return books.filter(book => book.authorId === author.id)
        }
      }
    })
  })
  
  const RootQueryType = new GraphQLObjectType({
    name: 'Query',
    description: 'Root Query',
    fields: () => ({
      book: {
        type: BookType,
        description: 'Current Book',
        args: {
          id: { type: GraphQLInt }
        },
        resolve: (parent, args) => books.find(book => book.id === args.id)
      },
      books: {
        type: new GraphQLList(BookType),
        description: 'List of All Books',
        resolve: () => books
      },
      authors: {
        type: new GraphQLList(AuthorType),
        description: 'List of All Authors',
        resolve: () => authors
      },
      author: {
        type: AuthorType,
        description: 'Current Author',
        args: {
          id: { type: GraphQLInt }
        },
        resolve: (parent, args) => authors.find(author => author.id === args.id)
      }
    })
  })
  
  const RootMutationType = new GraphQLObjectType({
    name: 'Mutation',
    description: 'Root Mutation',
    fields: () => ({
      addBook: {
        type: BookType,
        description: 'Add book',
        args: {
          name: { type: GraphQLNonNull(GraphQLString) },
          authorId: { type: GraphQLNonNull(GraphQLInt) }
        },
        resolve: (parent, args) => {
          const book = { id: books.length + 1, name: args.name, authorId: args.authorId }
          books.push(book)
          return book
        }
      },
      addAuthor: {
        type: AuthorType,
        description: 'Add author',
        args: {
          name: { type: GraphQLNonNull(GraphQLString) }
        },
        resolve: (parent, args) => {
          const author = { id: authors.length + 1, name: args.name }
          authors.push(author)
          return author
        }
      }
    })
  })
  
  const schema = new GraphQLSchema({
    query: RootQueryType,
    mutation: RootMutationType
  })



app.use('/graphql', expressGraphQL({
    schema: schema,
    graphiql: true
}));

app.listen(5001, () => console.log('codcodile GQL tut is running'))

import './App.css';
import Books from './books';

import { InMemoryCache, ApolloProvider, createHttpLink, ApolloClient } from '@apollo/client';


  const client = new ApolloClient({ 
    uri: 'http://localhost:5001/graphql',
    cache: new InMemoryCache(),
  })


function App() {
  
  return (
   <ApolloProvider client={client}>
     <Books />
   </ApolloProvider>
  );
}

export default App;

import { gql } from '@apollo/client';

const GET_ALL_BOOKS_DATA = gql`
query {
    books {
    id
    name
    author {
    	name  
    }
  }
}
`;
export  {GET_ALL_BOOKS_DATA};

import React , {useEffect, useState} from 'react'
import {useQuery} from '@apollo/client';
import {GET_ALL_BOOKS_DATA} from './graphql/queries';
import Book from './book';

export default function Books() {
    
    const { loading, error, data } = useQuery(GET_ALL_BOOKS_DATA);
    const [state, setstate] = useState(null);
    useEffect(() => {
        if(loading){
            
        }else{
            setstate(displayLaunches(data));
        } 
    },[data])

    function displayLaunches(data){
        return data.books.map((book)=>{
            return  (<Book key={book.id} bookData={book} />)
                })
        }
    return (
        <div>
            {state}
        </div>
    )
}

import React from 'react'

export default function Book({bookData}) {
    return (
        <div>
            {bookData.name}
            {bookData.author.name}
        </div>
    )
}