T
TanStack•4w ago
absent-sapphire

Best practice suggestion: Should I avoid mapping over api data?

A lot of my useQuery hooks are mapping over api response to shape the data nicely for frontend consumption. My hunch is that I should generally avoid doing this and do the massaging in the select of a useLiveQuery or pure function instead of altering the data shape of whats going to the db. Pls confirm/deny/refine my hunch 🙂 Example Before 
    queryFn: () =>
      clientSDK
        .listModels(filter.page, filter.size, filter.createdBy, "active", filter.sort)
        .then((data) => ({
          total: data.total,
          items: data.items.map((model) => {
            const revision = model.file.currentRevision();
            return {
              ...model,
              id: model.id,
              created: model.file.revisions[0].created,
              fileName: revision.name,
              mime: revision.mime,
              extension: revision.extension ? getConnectedFileExtension(revision.extension) : "",
              size: revision.size,
              description: revision.description,
              versionName: revision.versionName,
              externalIdentifier: revision.externalIdentifier,
              displayFileName: revision.displayName || getFileNameAndExtension(revision.name)?.name,
              uploaderName: formatUserName(usersCollection.get(model.file.createdById!)),
            };
          }),
    queryFn: () =>
      clientSDK
        .listModels(filter.page, filter.size, filter.createdBy, "active", filter.sort)
        .then((data) => ({
          total: data.total,
          items: data.items.map((model) => {
            const revision = model.file.currentRevision();
            return {
              ...model,
              id: model.id,
              created: model.file.revisions[0].created,
              fileName: revision.name,
              mime: revision.mime,
              extension: revision.extension ? getConnectedFileExtension(revision.extension) : "",
              size: revision.size,
              description: revision.description,
              versionName: revision.versionName,
              externalIdentifier: revision.externalIdentifier,
              displayFileName: revision.displayName || getFileNameAndExtension(revision.name)?.name,
              uploaderName: formatUserName(usersCollection.get(model.file.createdById!)),
            };
          }),
Example After 
    queryFn: () =>
      clientSDK
        .listModels()
        .then((data) => ({
          total: data.total,
          items: data.items
          }),
    queryFn: () =>
      clientSDK
        .listModels()
        .then((data) => ({
          total: data.total,
          items: data.items
          }),
2 Replies
conscious-sapphire
conscious-sapphire•4w ago
Yeah exactly. You certainly can do this but the advantage of not doing it is that it's faster to have DB do the massaging and it's a lot more flexible as you can query data from the same collection to multiple places around your app w/o changing your queryFn
absent-sapphire
absent-sapphireOP•4w ago
🙇‍♂️

Did you find this page helpful?