React Query Persister: clear stale data on boot (requires react-native-mmkvm runs on iOS, Android and Web)

clear-stale-persisted-data.ts

export const useClearStalePersistedReactQueryData = () => {
  useEffect(() => {
    const threeDaysAgo = Date.now() - 3 * 24 * 60 * 60 * 1000 // Timestamp of 3 days ago

    storage.getAllKeys().forEach((entry) => {
      // we only want to clear the data for react-query with the prefix 'my-random-prefix'
      if (!entry.startsWith('my-random-prefix')) {
        return
      }

      const rawValue = storage.getString(entry)
      if (!rawValue) return

      try {
        const value = JSON.parse(rawValue)
        if (value?.state?.dataUpdatedAt && value.state.dataUpdatedAt < threeDaysAgo) {
          storage.delete(entry)
        }
      } catch (error) {
        console.error(`Error parsing JSON for key ${entry}:`, error)
      }
    })
  }, [])
}

And a more sophisticated solution:

const buildKey = process.env.CODEBUILD_BUILD_ID
const buster = `whatever-your-like-${buildKey}`
const prefix = 'your-prefix-entry'

export const clearStalePersistedReactQueryData = () => {
  // this is needed to avoid issues with SSR rendering
  // prevents metro from build failing
  if (typeof window === 'undefined') return

  const persistentStoreTime = Date.now() - 1 * 24 * 60 * 60 * 1000 // Timestamp of 1 day

  storage.getAllKeys().forEach((entry) => {
    // we only want to clear the data for react-query with the prefix defined above
    if (!entry.startsWith(prefix)) {
      return
    }

    const rawValue = storage.getString(entry)
    if (!rawValue) return

    try {
      const value = JSON.parse(rawValue)
      
      // Check if the entry contains "buster" and if it matches the current buster
      // otherwise delete the entry
      if (value?.buster !== buster) {
        storage.delete(entry)
        return
      }

      if (value?.state?.dataUpdatedAt && value.state.dataUpdatedAt < persistentStoreTime) {
        // Delete the stale entry
        storage.delete(entry)
      } else {
        // Check if the entry contains "pages" and "pageParams"
        if (value.state.data && value.state.data.pages && value.state.data.pageParams) {
          const { pages, pageParams } = value.state.data

          // Check if the length of "pages" and "pageParams" is greater than 1
          if (pages.length > 1 && pageParams.length > 1) {
            // Slice "pages" and "pageParams" to keep only the first entry
            value.state.data.pages = pages.slice(0, 1)
            value.state.data.pageParams = pageParams.slice(0, 1)

            // Update the stored value with the modified data
            storage.set(entry, JSON.stringify(value))
          }
        }
      }
    } catch (error) {
      console.error(`Error parsing JSON for key ${entry}:`, error)
    }
  })
}