GraphQL实现(前端:React + Material-UI + Recoil)

原创

種法龍

修改于 2023-12-28 16:22:32

1350

修改于 2023-12-28 16:22:32

文章被收录于专栏：未知未知

这是一个简单的示例，包括一个任务列表、任务详情和创建任务的页面。每个页面都会使用GraphQL查询或变更与后端进行通信

前端（React + Material-UI + Recoil）：

首先，确保已安装了所需的依赖：

npm install @material-ui/core @material-ui/icons recoil

然后，可以使用以下示例代码：

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { RecoilRoot } from 'recoil';
import { ApolloProvider } from '@apollo/client';
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import TaskList from './TaskList';
import TaskDetail from './TaskDetail';
import TaskForm from './TaskForm';
import { CssBaseline, AppBar, Toolbar, Typography, Container } from '@material-ui/core';

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

const App = () => (
  <ApolloProvider client={client}>
    <RecoilRoot>
      <Router>
        <CssBaseline />
        <AppBar position="static">
          <Toolbar>
            <Typography variant="h6">Task Manager</Typography>
          </Toolbar>
        </AppBar>
        <Container>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/tasks">Tasks</Link>
              </li>
              <li>
                <Link to="/create">Create Task</Link>
              </li>
            </ul>
          </nav>
          <Switch>
            <Route path="/tasks" component={TaskList} />
            <Route path="/task/:id" component={TaskDetail} />
            <Route path="/create" component={TaskForm} />
          </Switch>
        </Container>
      </Router>
    </RecoilRoot>
  </ApolloProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

在上述示例中，使用了Material-UI的组件来构建页面结构和样式。Recoil用于状态管理，可以在TaskList、TaskDetail和TaskForm组件中使用。

可以在各个组件中利用Recoil来管理组件状态和全局状态，例如：

// src/TaskList.js

import React from 'react';
import { useRecoilValue } from 'recoil';
import { taskListState } from './recoil/atoms';

const TaskList = () => {
  const tasks = useRecoilValue(taskListState);

  return (
    <div>
      <h2>Task List</h2>
      <ul>
        {tasks.map((task) => (
          <li key={task._id}>{task.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default TaskList;

在这个例子中，taskListState是一个Recoil原子状态，它存储了任务列表。可以在其他组件中以相似的方式使用Recoil来管理状态。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

material-ui