T
TanStack•3w ago
genetic-orange

localStorageCollection not saving

Tried a bunch of different things, but can't figure out why my localStorageCollection isn't saving anything in the db. here's my current code: 
import {
  createCollection,
  eq,
  localStorageCollectionOptions,
  useLiveQuery,
} from '@tanstack/react-db'
import z from 'zod'

const preferencesSchema = z.object({
  id: z.literal('preferences'),
  theme: z.enum(['light', 'dark', 'system']).default('system'),
  requestTimelineSize: z.number().default(15),
})

export type Preferences = z.infer<typeof preferencesSchema>

export const preferencesCollection = createCollection(
  localStorageCollectionOptions({
    id: 'preferences-collection',
    storageKey: 'lumen.preferences',
    schema: preferencesSchema,
    getKey: (item) => item.id,
  }),
)

export const usePreferences = () => {
  return useLiveQuery((q) =>
    q
      .from({ preferences: preferencesCollection })
      .where(({ preferences }) => eq(preferences.id, 'preferences'))
      .findOne(),
  )
}

export function updatePreferences(
  preferences: Omit<Partial<Preferences>, 'id'>,
) {
  preferencesCollection.update('preferences', (draft) => {
    draft.requestTimelineSize =
      preferences.requestTimelineSize ?? draft.requestTimelineSize
  })
}
import {
  createCollection,
  eq,
  localStorageCollectionOptions,
  useLiveQuery,
} from '@tanstack/react-db'
import z from 'zod'

const preferencesSchema = z.object({
  id: z.literal('preferences'),
  theme: z.enum(['light', 'dark', 'system']).default('system'),
  requestTimelineSize: z.number().default(15),
})

export type Preferences = z.infer<typeof preferencesSchema>

export const preferencesCollection = createCollection(
  localStorageCollectionOptions({
    id: 'preferences-collection',
    storageKey: 'lumen.preferences',
    schema: preferencesSchema,
    getKey: (item) => item.id,
  }),
)

export const usePreferences = () => {
  return useLiveQuery((q) =>
    q
      .from({ preferences: preferencesCollection })
      .where(({ preferences }) => eq(preferences.id, 'preferences'))
      .findOne(),
  )
}

export function updatePreferences(
  preferences: Omit<Partial<Preferences>, 'id'>,
) {
  preferencesCollection.update('preferences', (draft) => {
    draft.requestTimelineSize =
      preferences.requestTimelineSize ?? draft.requestTimelineSize
  })
}
Something I'm overlooking?
3 Replies
genetic-orange
genetic-orangeOP•3w ago
i just realize maybe i need to insert first, is there a way to do upserts? 
export function updatePreferences(
  preferences: Omit<Partial<Preferences>, 'id'>,
) {
  const hasPreferences = preferencesCollection.get('preferences')
  if (hasPreferences) {
    preferencesCollection.update('preferences', (draft) => {
      draft.requestTimelineSize =
        preferences.requestTimelineSize ?? draft.requestTimelineSize
    })
  } else {
    preferencesCollection.insert({
      id: 'preferences',
      ...preferences,
    })
  }
}
export function updatePreferences(
  preferences: Omit<Partial<Preferences>, 'id'>,
) {
  const hasPreferences = preferencesCollection.get('preferences')
  if (hasPreferences) {
    preferencesCollection.update('preferences', (draft) => {
      draft.requestTimelineSize =
        preferences.requestTimelineSize ?? draft.requestTimelineSize
    })
  } else {
    preferencesCollection.insert({
      id: 'preferences',
      ...preferences,
    })
  }
}
ok that was pretty dumb 😄 i was assuming with localStorage updating would behave as an upsert.
correct-apricot
correct-apricot•3w ago
there a way to do upserts?
No, at the moment we only have the disticnt insert and update methods. Wrapping them with your own help as you have is ideal.
genetic-orange
genetic-orangeOP•3w ago
Thanks!

Did you find this page helpful?