langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 03:55:25 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #30102] fix(web): remove incorrect placeholderData usage in useExploreAppList #32686

New Issue
Closed
opened 2026-02-21 20:51:53 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:51:53 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/langgenius/dify/pull/30102

State: closed
Merged: Yes

Summary

Fixes incorrect placeholderData usage in useExploreAppList that was introduced in PR #30076.

Background

PR #30076 migrated the Explore app list from useSWR to TanStack Query, but used placeholderData: exploreAppListInitialData (empty arrays) to simulate the loading state. This is an anti-pattern according to TanStack Query's official documentation.

Problem

According to TanStack Query docs:

placeholderData: Provides temporary data to display while a query is in the pending state. Unlike initialData, placeholder data is NOT persisted to the cache. It should be used for meaningful temporary content (e.g., skeleton data, previous results), NOT empty arrays to mock loading.

The previous implementation had these issues:

  1. Broke Query state machine: With placeholderData, data is never undefined, so isLoading is always false
  2. Unable to distinguish states: Cannot tell the difference between "loading" and "truly empty data"
  3. Semantic mismatch: Empty arrays are not "temporary data" - they're just absence of data

Solution

Remove placeholderData and use the proper isLoading state to control loading:

Before:

const {
  data: { categories, allList } = exploreAppListInitialData,
} = useExploreAppList()

if (!categories || categories.length === 0) {
  return <Loading />  // Shows loading even when truly empty
}

After:

const {
  data,
  isLoading,
} = useExploreAppList()

if (isLoading) {
  return <Loading />  // Only shows during initial fetch
}

if (!data || data.categories.length === 0) {
  return <EmptyState />  // Shows when actually empty
}

Changes

  • web/service/use-explore.ts: Remove exploreAppListInitialData export and placeholderData option
  • web/app/components/explore/app-list/index.tsx: Use isLoading for loading state, remove unused PageType enum
  • web/app/components/app/create-app-dialog/app-list/index.tsx: Use isLoading for loading state

Testing

  • pnpm lint:fix - Passes
  • pnpm type-check:tsgo - Passes

References

**Original Pull Request:** https://github.com/langgenius/dify/pull/30102 **State:** closed **Merged:** Yes --- ## Summary Fixes incorrect `placeholderData` usage in `useExploreAppList` that was introduced in PR #30076. ## Background PR #30076 migrated the Explore app list from useSWR to TanStack Query, but used `placeholderData: exploreAppListInitialData` (empty arrays) to simulate the loading state. This is an anti-pattern according to TanStack Query's official documentation. ## Problem According to [TanStack Query docs](https://tanstack.com/query/latest/docs/react/reference/useQuery): > **placeholderData**: Provides temporary data to display while a query is in the `pending` state. Unlike `initialData`, placeholder data is NOT persisted to the cache. It should be used for meaningful temporary content (e.g., skeleton data, previous results), NOT empty arrays to mock loading. The previous implementation had these issues: 1. **Broke Query state machine**: With `placeholderData`, `data` is never `undefined`, so `isLoading` is always `false` 2. **Unable to distinguish states**: Cannot tell the difference between "loading" and "truly empty data" 3. **Semantic mismatch**: Empty arrays are not "temporary data" - they're just absence of data ## Solution Remove `placeholderData` and use the proper `isLoading` state to control loading: **Before:** ```tsx const { data: { categories, allList } = exploreAppListInitialData, } = useExploreAppList() if (!categories || categories.length === 0) { return <Loading /> // Shows loading even when truly empty } ``` **After:** ```tsx const { data, isLoading, } = useExploreAppList() if (isLoading) { return <Loading /> // Only shows during initial fetch } if (!data || data.categories.length === 0) { return <EmptyState /> // Shows when actually empty } ``` ## Changes - **web/service/use-explore.ts**: Remove `exploreAppListInitialData` export and `placeholderData` option - **web/app/components/explore/app-list/index.tsx**: Use `isLoading` for loading state, remove unused `PageType` enum - **web/app/components/app/create-app-dialog/app-list/index.tsx**: Use `isLoading` for loading state ## Testing - `pnpm lint:fix` - Passes - `pnpm type-check:tsgo` - Passes ## References - TanStack Query official docs on [placeholderData](https://tanstack.com/query/latest/docs/react/reference/useQuery) - TanStack Query official docs on [initialData vs placeholderData](https://tanstack.com/query/latest/docs/react/guides/initial-query-data)
yindo added the pull-request label 2026-02-21 20:51:53 -05:00
yindo closed this issue 2026-02-21 20:51:53 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#32686
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?