Differences between FirebaseFirestore.Timestamp and firebase.firestore.Timestamp in a React Native client and Admin Node server context

Currently facing an issue that seems straightforward but is proving difficult to resolve. Despite thorough documentation review and a lack of similar inquiries, I am encountering difficulties.

My project involves building an app using React Native, where documents are generated and transmitted to a Firebase function operated by an Express server connecting to Firestore through the Admin SDK for node@10. The primary obstacle lies in efficiently representing dates to avoid continuous conversions between various date fields within my documents and subdocuments. Initializing the react native firebase connection with 

import * as firebase from firebase
, and 
firebase.initializeApp(...config)
. The Timestamp object provided by this library is listed as firebase.firestore.Timestamp. Conversely, on the server side, initialization occurs using 
import * as admin from 'firebase-admin'
followed by 
admin.initializeApp(credential, ...config)
. In this context, the Timestamp is identified as FirebaseFirestore.Timestamp sourced from the google-api library rather than firestore. Consequently, when attempting to parcel an object of this type from the server to the client or vice versa, typescript compilation fails due to incompatible types.

My latest endeavor involved utilizing the Date object which unfortunately gets automatically converted into a FirebaseFirestore.Timestamp object upon submission to Firestore. This process leads back to my initial issue of evading manual conversion for every object before performing a typecheck at both ends of the REST API.

Any advice on resolving this dilemma? While lacking a replicable example here, I believe it's primarily a type discrepancy rather than a programming flaw.

Your assistance would be greatly appreciated!

(Additionally, the inability to utilize @firebase/testing's initializeTestApp() stems from the contradictory nature of FirebaseFirestore.Firestore and firebase.firestore.Firestore, creating uncertainty if they belong to the same classification of errors as the current one.)

typescriptfirebasereact-nativegoogle-cloud-firestoretimestamp

Answer №1

It turned out that the answer to my problem was not as straightforward as I had initially thought. I assumed that defining my interfaces in one place would suffice, but it actually required me to create separate interfaces for the different types of Timestamp:

On the client side:

TimestampedValue.ts

import * as firebase from 'firebase';
export interface TimestampedValue {
    value: string;
    time: firebase.firestore.Timestamp;
}

On the server side: Timestampedvalue.ts

import * as admin from 'firebase-admin';
export interface TimestampedValue {
    value: string;
    time: admin.firestore.Timestamp;
}

This revelation proved to be a breakthrough for me!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What's the best way to invoke this specific TypeScript function?

I have come across a library that includes the following function declaration: import { Auth0JwtStrategy } from './strategy/auth0-jwt.strategy'; import { Auth0Service } from './auth0.service'; import { Auth0Options } from './auth0. ...

typescriptauth0

The most effective method for monitoring updates to an array of objects in React

Imagine a scenario where an array of objects is stored in state like the example below: interface CheckItem { label: string; checked: boolean; disabled: boolean; } const [checkboxes, setCheckboxes] = useState<CheckItem[] | undefined>(undefined ...

javascriptreactjstypescript

Is TypeScript's Structural Typing the exception to the rule?

Let me illustrate two scenarios where I encountered difficulties. The first example involves two points: one in 2d and one in 3d: type Point2D = { x: number, y: number }; type Point3D = { x: number, y: number, z: number }; let point2D: Point2D = { x: 10, ...

typescripttypescript-typings

Utilizing the variables defined in the create function within the update function of Phaser 3

I'm facing an issue in my game where I can't access a variable that I declared in the create function when trying to use it in the update function. Here is a snippet of what I'm trying to achieve: create() { const map = this.make. ...

javascripttypescriptphaser-framework

The Select element in Next.js needs to have an accessible name - it must have a title attribute for improved accessibility

Just starting out with Next.js and Typescript. I'm in the process of rebuilding an app using Next.js, but I've hit a roadblock when trying to split pages and components. The error message that keeps popping up is "Select element must have an acce ...

reactjstypescriptnext.jscomponents

What is the process for creating documentation for a TypeScript enum type with the format of { [key]: value }

I am currently developing a logger service for nodeJS using Typescript. One important component of this project is an enum that looks like this: enum LOG_TYPES { NONE = 0, ERROR = 1, WARN = 2, INFO = 3, DEBUG = 4, } Along with the enum, I have i ...

typescriptenumsjsdoctsdoc

Elementary component placed in a single line

Creating a text dropdown menu using the following code: import { Autocomplete, TextField } from '@mui/material' import React, { useState } from 'react' const options = [ 'Never', 'Every Minute', 'Every 2 ...

reactjstypescriptmaterial-ui

Unlocking the Power of Angular 12: Leveraging the Subscribe Method to Access Multiple REST APIs

We have a task where we need to make multiple REST API calls from the ngOnInit() method, one after the other. After making the first call, we need to pass the response to the second API call, and similarly for the third call, we need to get the value from ...

angulartypescriptvisual-studio-code

Checkmate with React Native's Checkbox Component

I have implemented the React Native Elements CheckBox inside List Items within a Flat List. import React, { Component } from "react"; import { View, Text, StyleSheet, FlatList } from "react-native"; import axios from 'axios&apo ...

javascriptreactjsreact-native

Encountering incorrect month while utilizing the new Date() object

My Objective: I am looking to instantiate a new Date object. Snippet of My Code: checkDates (currentRecSec: RecommendedSection){ var currActiveFrom = new Date(currentRecSec.activeFrom.year,currentRecSec.activeFrom.month,currentRecSec.activeFrom.day ...

angulartypescriptdatetime

The issue arises when specifying a type in a const method but neglecting to declare it in a regular function

While I was working on the layout, I checked out the official NextJS document for guidance. https://nextjs.org/docs/basic-features/layouts // _app.tsx export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & { getLayout?: (page ...

reactjstypescriptnext.js

performing operations on documents with geofirestore

I have been exploring the use of Geofirestore in a React Native project. I've successfully implemented methods to add elements into Firestore, but according to the documentation, data should be added using Geofirestore methods. Do I need to switch all ...

reactjsreact-nativegoogle-cloud-firestoregeospatialgeofirestore

In TypeScript, a numerical value can be returned as a string when

After creating a numericQuantity variable that is a casted string quantity, I was puzzled as to why the typeof returns string even though the variable is supposed to be of type :number. let quantity: string = '10'; let numericQuantity: number = q ...

javascripttypescript

Convert an object to an array, but only if it is not already an array

If we need to iterate over either an Object or an Array of Objects, we can transform the Object into an array of one object and then iterate in our React App accordingly. Let's consider an example: // Returned value as object const zoo = { lion: &a ...

javascriptreactjstypescript

Deactivating attribute inheritance / configuring component settings with script setup and Typescript

Is there a way to disable attribute inheritance for a component's options when using script setup syntax with Typescript in Vue 3? Here is the JavaScript code example: app.component('date-picker', { inheritAttrs: false, // [..] }) How ...

typescriptvue.jsvue-componentvuejs3vue-script-setup

Utilize a single component across various instances for enhanced efficiency

After thorough research, I couldn't find a solution to my problem despite similar questions being asked. I've developed an angular component for styled radio buttons and need to use it multiple times on different instances. To get a better unde ...

angulartypescript

Exploring modules alias functionality in TypeScript

Initially, I believed that using path & basePath in tsconfig would allow aliases, but it appears not to be the case. "moduleResolution": "node", "baseUrl": "./src", "paths": { "@api/*": [&qu ...

typescripttsconfig

The TypeScript conditional return type is not functioning as expected when being tested against an extension of undefined

When testing the return type of func, it should be number if the argument arg is provided, otherwise it should be string. However, conducting tests with extending undefined does not yield the expected result. Testing against types like extending number or ...

typescript

What is preventing MenuItemLink from being displayed in the menu?

I have created a unique page for users to purchase subscriptions, but I am having trouble accessing that page because the button is not appearing in the menu. I followed the steps outlined in the official guide, but only the dashboard and resources buttons ...

reactjstypescriptnext.jsreact-admin

The NDK located in the ~/Library/Android/sdk/ndk-bundle directory for Flutter was missing a source.properties file

After launching the Flutter app in vscode, I encountered the following error message in CMD: FAILURE: Build failed with an exception. Issue: Execution failed for task ':app:stripDebugDebugSymbols'. NDK at C:\Users\jupun\AppData&b ...

javaandroidreact-nativeflutterflutter-dependencies