对应内容 #18 Bookings | Build a Complete App with GraphQL, Node.js, MongoDB and React.js

主要内容：

• 在events列表中完成订阅功能
• 完成booking.js 渲染订阅的活动的列表
• 学习了如何在后端给预检请求设置安全时间（如何不要每次都发预检请求？）

文章目录

• 1 在events列表中完成订阅功能
• 2 完成booking.js 渲染订阅的活动的列表
• 3 如何不要每次都发预检请求？

1 在events列表中完成订阅功能

bookEventHandler = () => {
	if (!this.context.token) {
	    this.setState({selectedEvent: null});
	    return;
	}
	const queryBody = {
	    query: `
	        mutation {
	            bookEvent(eventId: "${this.state.selectedEvent._id}") {
	                _id
	                createdAt
	                updatedAt
	            }
	        }
	    `
	}
	fetch("http://localhost:3030/graphql", {
	    method: "POST",
	    headers: {
	        "Content-Type": "application/json",
	        "Authorization": "Bearer " + this.context.token
	    },
	    body: JSON.stringify(queryBody),
	})
	.then(response => {
	    if (response.status !== 200 && response.status !== 201) {
	        throw new Error("request failed!")
	    }
	    this.setState({
	        isModalShow: false
	    })
	    return response.json();
	})
	.then(data => {
	    console.log(data.data);
	    this.setState({selectedEvent: null});
	})
	.catch(err => {
	    throw err;
	});
};

2 完成booking.js 渲染订阅的活动的列表

import React, { Component } from 'react';
import AuthContext from '../context/auth-context';
import Snipper from '../components/Snipper/Snipper';

class BookingsPage extends Component {
    state = {
        isLoading: false,
        bookings: []
    }

    static contextType = AuthContext;

    componentDidMount () {
        this.fetchBookings();
    }

    fetchBookings = () => {
        if (!this.context.token) {
            return;
        }
        this.setState({
            isLoading: true
        });
        const queryBody = {
            query: `
                query {
                    bookings {
                        _id
                        event {
                            _id
                            title
                        }
                        user {
                            _id
                        }
                        createdAt
                        updatedAt
                    }
                }
            `
        }
        fetch("http://localhost:3030/graphql", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer " + this.context.token
            },
            body: JSON.stringify(queryBody),
        })
        .then((response) => {
            if (response.status !== 200 && response.status !== 201) {
                throw new Error("request failed!");
            }
            return response.json();
        })
        .then((data) => {
            this.setState({
                bookings: data.data.bookings
            })
        })
        .catch((err) => {
            throw err;
        })
        .then(() => {
            this.setState({
                isLoading: false
            });
        }, err => {
            this.setState({
                isLoading: false
            });
            throw err;
        });
    };

    render() {
        return (
            <React.Fragment>
                <h1>The booking Page</h1>
                {
                    this.state.isLoading ? <Snipper /> :
                    <ul className="eventList">
                    {
                        this.state.bookings.map(booking => {
                            return <li className="eventlist__item" key={booking._id}>{booking.event.title} - {booking.createdAt}</li>
                        })
                    }
                    </ul>
                }
            </React.Fragment>
        );
    }
}

export default BookingsPage;

3 如何不要每次都发预检请求？