// React组件示例
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [componentProps, setComponentProps] = useState({});
  
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('/api/component-properties');
        setComponentProps(response.data);
      } catch (error) {
        console.error('Error fetching component properties:', error);
      }
    };
    
    fetchData();
  }, []);

  return (
    <div>
      <h1>{componentProps.title || 'Default Title'}</h1>
      <p>{componentProps.content || 'Default content'}</p>
    </div>
  );
};

// Express API端点
const express = require('express');
const mongoose = require('mongoose');
const app = express();

// 连接MongoDB
mongoose.connect('mongodb://localhost:27017/myapp', { useNewUrlParser: true });

// 定义模式
const ComponentSchema = new mongoose.Schema({
  componentId: String,
  properties: Object
});

const Component = mongoose.model('Component', ComponentSchema);

// API端点
app.get('/api/component-properties/:id', async (req, res) => {
  try {
    const component = await Component.findOne({ componentId: req.params.id });
    if (!component) {
      return res.status(404).json({ error: 'Component not found' });
    }
    res.json(component.properties);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(3000, () => console.log('Server running on port 3000'));

// GraphQL解析器示例
const resolvers = {
  Query: {
    componentProperties: async (_, { componentId }) => {
      const component = await Component.findOne({ componentId });
      return component ? component.properties : null;
    }
  },
  Mutation: {
    updateComponentProperties: async (_, { componentId, properties }) => {
      const component = await Component.findOneAndUpdate(
        { componentId },
        { properties },
        { new: true, upsert: true }
      );
      return component.properties;
    }
  }
};

// MongoDB变更流监听
const changeStream = Component.watch();

changeStream.on('change', (change) => {
  // 通过WebSocket或其他机制通知前端
  io.emit('component-update', change.fullDocument);
});