Tottem 项目常见问题解决方案

Tottem 项目常见问题解决方案

tottem Bookmark manager on steroid built with React / NextJs / Apollo Tools / Prisma 2 — styled with TailwindCSS 🌱🎺 项目地址: https://gitcode.com/gh_mirrors/to/tottem

1. 项目基础介绍和主要编程语言

Tottem 是一个开源的实验性项目，它旨在结合个人生产力工具方法与（缓慢）社交媒体功能，以使用户获得更多权力和某种程度的解放。该项目的目标是通过伦理设计构建产品，并实验开源网络技术，与大家分享。Tottem 是一个全栈的 TypeScript 应用程序，使用了代码生成技术以确保端到端类型安全。主要编程语言包括 TypeScript、JavaScript，并使用了以下技术栈：

• React: 用于构建用户界面的JavaScript库
• NextJS: 提供快速的服务端渲染体验
• TailwindCSS: 用于样式设计的实用工具类CSS框架
• GraphQL: 由 Apollo 工具支持
• Auth0: 用于身份验证
• Prisma: 管理数据模型和数据库的框架

2. 新手在使用这个项目时需要特别注意的3个问题及解决步骤

问题1：如何设置开发环境

问题描述：新手在开始项目之前，需要正确配置开发环境。

解决步骤：

1. 确保已经安装了 Node.js 和 npm。
2. 克隆项目到本地：git clone https://github.com/poulainv/tottem.git
3. 进入项目目录：cd tottem
4. 安装项目依赖：npm install
5. 运行项目：npm run dev
6. 在浏览器中访问 http://localhost:3000 查看项目。

问题2：如何进行代码生成

问题描述：Tottem 使用了代码生成技术来保证类型安全，新手可能不知道如何进行代码生成。

解决步骤：

1. 在项目根目录下运行：npx prisma generate 来生成 Prisma 客户端代码。
2. 运行：npm run generate 来生成其他必要的代码。

问题3：如何处理 GraphQL 请求

问题描述：项目使用了 GraphQL 进行数据查询和操作，新手可能不熟悉如何发送 GraphQL 请求。

解决步骤：

1. 在项目中查找 graphql 文件夹，了解定义的查询和变更。

2. 使用 Apollo Client 来发送 GraphQL 请求，以下是一个基本的查询示例：

   import { gql, useQuery } from '@apollo/client';
   
   const GET_BOOKMARKS = gql`
     query GetBookmarks {
       bookmarks {
         id
         title
         url
       }
     }
   `;
   
   const { loading, error, data } = useQuery(GET_BOOKMARKS);
   

3. 确保 Apollo Client 已经正确配置，并连接到 Apollo Server。

通过以上步骤，新手可以更顺利地开始使用 Tottem 项目，并解决在开发过程中可能遇到的问题。

tottem Bookmark manager on steroid built with React / NextJs / Apollo Tools / Prisma 2 — styled with TailwindCSS 🌱🎺 项目地址: https://gitcode.com/gh_mirrors/to/tottem