willie-hung

import useTodos from "./hooks/useTodos";

const TodoList = () => {
  const { data, error, isLoading } = useTodos();

  if (isLoading) return <p>Loading...</p>;

  if (error) return <p>{error.message}</p>;

  return (

willie-hung

.
└── vite-project/
    ├── public/
    │   └── vite.svg
    ├── src/
    │   ├── assets/
    │   │   └── react.svg
    │   ├── App.css
    │   ├── App.tsx
    │   ├── index.css

willie-hung

import axios from "axios";
import { useEffect, useState } from "react";

interface Todo {
  id: number;
  title: string;
  userId: number;
  completed: boolean;
}

willie-hung

import "bootstrap/dist/css/bootstrap.css";
import React from "react";
import ReactDOM from "react-dom/client";
// Import React Query
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import App from "./App";
import "./index.css";

// Initiate the client
const queryClient = new QueryClient();

willie-hung

import { ApolloServer } from "@apollo/server";
import { startStandaloneServer } from "@apollo/server/standalone";
import { typeDefs } from "./schema";
import { addMocksToSchema } from "@graphql-tools/mock";
import { makeExecutableSchema } from "@graphql-tools/schema";
import { mocks } from "./data";

async function startApolloServer() {
  const server = new ApolloServer({
    schema: addMocksToSchema({

willie-hung

import gql from "graphql-tag";

export const typeDefs = gql`
  type Query {
    "Get user array"
    users: [User!]!
  }

  ""
  type User {

willie-hung

import casual from "casual";

export const mocks = {
  Query: () => ({
    users: () => [...new Array(3)],
  }),

  User: () => ({
    firstName: () => casual.first_name,
    lastName: () => casual.last_name,

willie-hung

import { useState } from "react";
import usePosts from "./hooks/usePost";

const PostList = () => {
  const pageSize = 10;
  const [page, setPage] = useState<number>(1);
  const { data, error, isLoading } = usePosts({ page, pageSize });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>{error.message}</p>;

willie-hung

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

interface Post {
  id: number;
  title: string;
  body: string;
  userId: number;
}

willie-hung

import { useState } from "react";
import usePosts from "./hooks/usePost";
import React from "react";

const PostList = () => {
  const pageSize = 10;
  const { data, error, isLoading, fetchNextPage, isFetchingNextPage } =
    usePosts({ pageSize });

  if (isLoading) return <p>Loading...</p>;