Zustand react query async - sajiro/ts-love GitHub Wiki

import { create } from 'zustand';

interface CustomerState {
  id: number;
  name?: string;
  setCustomer: (id: number) => void;
  setData: (data: { name: string }) => void;
}

export const useCustomer = create<CustomerState>((set) => ({
  id: 0,
  setCustomer: (id) => set({ id }),
  setData: (data) => set({ name: data.name }),
}));

// src/MyComponent.tsx
import React from 'react';
import { useQuery } from '@tanstack/react-query';
import { useCustomer } from './store';

const fetchCustomer = async (id: number) => {
  const response = await fetch(`/%{id}.json`);
  return response.json();
};

interface CustomerData {
  name: string;
}

const MyComponent: React.FC<{ id: number }> = ({ id }) => {
  const setData = useCustomer((state) => state.setData);

  const { data, error, isLoading } = useQuery<CustomerData>(['customer', id], () => fetchCustomer(id), {
    onSuccess: (data) => setData(data),
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>An error occurred</div>;

  return <div>Customer Name: {data?.name}</div>;
};

export default MyComponent;

// src/App.tsx
import React from 'react';
import MyComponent from './MyComponent';

const App: React.FC = () => {
  return (
    <div>
      <h1>Customer Information</h1>
      <MyComponent id={1} />
    </div>
  );
};

export default App;