كيف تبدء مع GraphQL و Apollo Client

//تحديد المعلومات الضرورية لكل كتاب 
const BookType = new GraphQLObjectType({
  name: 'Book',
  fields: () => ({
    id: { type: GraphQLID },
    name: { type: GraphQLString },
    genre: { type: GraphQLString },
    author: {
      type: AuthorType,
      resolve(parent, args) {
        //سنقوم بالبحث عن الكاتب من قاعدة البيانات (MongoDB)
        return Author.findById(parent.authorid)
      },
    },
  }),
})

//تحديد المعلومات الضرورية لكل كاتب
const AuthorType = new GraphQLObjectType({
  name: 'Author',
  fields: () => ({
    id: { type: GraphQLID },
    name: { type: GraphQLString },
    age: { type: GraphQLInt },
    books: {
      type: new GraphQLList(BookType),
      resolve(parent, args) {
        //سنقوم بالبحث عن الكتب من قاعدة البيانات (MongoDB)
        return Book.find({ authorid: parent.id })
      },
    },
  }),
})

{
  books {
    name
    genre
  }
}

const RootQuery = new GraphQLObjectType({
  name: 'RootQueryType',
  fields: {
    books: {
      type: new GraphQLList(BookType),
      return(parent, args) {
        //استدعاء كل الكتب من قاعدة البيانات (MongoDB).
        return Book.find({})
      },
    },
  },
})

const Mutation = new GraphQLObjectType({
  name: "Mutation",
  fields: {
    addAuthor: {
      type: AuthorType,
      args: {
        name: { type: new GraphQLNonNull(GraphQLString) },
        age: { type: new GraphQLNonNull(GraphQLInt) },
      },
      resolve(parent, args) {
        //الكاتب هوا جزء من الAuthor Model من قاعدة البيانات MongoDB
        let author = new Author({
          name: args.name,
          age: args.age,
        })
        //حفظ الكاتب في قاعدة البيانات (MongoDB).
        return author.save()
      },
      }
    }
  }
})

mutation {
  addAuthor(name: "John Doe", age: 35) {
    name
    age
  }
}

import ApolloClient from 'apollo-boost'
import { ApolloProvider } from 'react-apollo'

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

function App() {
  return (
    <ApolloProvider client={client}>
      <div className='App'>
        <h1>Hello Apollo!</h1>
      </div>
    </ApolloProvider>
  )
}

import { gql } from 'apollo-boost'

const getBooksQuery = gql`
  {
    books {
      name
      id
    }
  }
`

const addBookMutation = gql`
  mutation ($name: String!, $genre: String!, $authorid: ID!) {
    addBook(name: $name, genre: $genre, authorid: $authorid) {
      name
      id
    }
  }
`

import { Query } from 'react-apollo'
import { getBooksQuery } from '../queries/queries'

function BookList() {
  return (
    //The query getBooksQuery is the query we created above.
    <Query query={getBooksQuery}>
      {({ loading, error, data }) => {
        if (loading) return <p>Loading...</p>
        if (error) return <p>Error 😢</p>

        return (
          <ul className='book-list'>
            {data.books.map(({ name, id }) => {
              return <li key={id}>{name}</li>
            })}
          </ul>
        )
      }}
    </Query>
  )
}

import { Mutation } from 'react-apollo'
import { addBookMutation } from '../queries/queries'
function addBook() {
  const onSubmit = (data, addBook) => {
    addBook({
      variables: {
        name: data.bookName,
        genre: data.genre,
        authorid: data.authorid,
      },
      refetchQueries: [{ query: getBooksQuery }],
    })
  }

  return (
    //This is the same addBookMutation that we created above.
    <Mutation mutation={addBookMutation}>
      {(addBook, { data }) => (
        <form onSubmit={handleSubmit((data) => onSubmit(data, addBook))}>
          <input
            placeholder='Book Name 📕'
            {...register('bookName', { required: true })}
          />
          <input
            placeholder='Genre 🌀'
            {...register('genre', { required: true })}
          />
          <select {...register('authorid')}>
            {' '}
            <option>Select the Author ✒</option>
            {options()}
          </select>
          <input type='submit' value='Add Book 📕' />
        </form>
      )}
    </Mutation>
  )
}