uber Posts - Answer Overflow

uber

Explore posts from servers

•Created by uber on 10/29/2024 in #help

Evolving form data and typesafety .

I'm building an app where clients submit forms and professionals can subscribe to them. The challenge: Each service (cleaning, plumbing, etc.) has its own unique form structure. Professionals can subscribe to specific services and filter based on form fields (e.g., "only show me residential cleaning jobs"). The main problem: When service forms evolve over time (adding/removing/modifying fields), I need to preserve old submissions exactly as they were submitted. However, this breaks TypeScript/Zod type safety. For example: // Original cleaning form type

type CleaningForm = {
  propertyType: 'residential' | 'commercial';
  size: number;
}

type CleaningForm = {
  propertyType: 'residential' | 'commercial';
  size: number;
}

// Updated cleaning form type (removed a field field)

type CleaningForm {
  //(propertyType was removed)
  size: number;
}

type CleaningForm {
  //(propertyType was removed)
  size: number;
}

export const project = pgTable("project", {
  id: serial("id").primaryKey(),
  clientId: integer("client_id").notNull(),
  serviceId: text("service_id").notNull(),
  formData: jsonb("data").notNull(), // <---- form data store in schemalass jsonb
});

export const project = pgTable("project", {
  id: serial("id").primaryKey(),
  clientId: integer("client_id").notNull(),
  serviceId: text("service_id").notNull(),
  formData: jsonb("data").notNull(), // <---- form data store in schemalass jsonb
});

Now TypeScript/Zod will complains when accessing old submissions in my database as they dont match updated types How do you handle this type safety problem when dealing with historical data that doesn't match your current types? Looking for patterns or approaches that maintain type safety across different versions of the same form.

2 replies

HHono

•Created by uber on 10/21/2024 in #help

Append Authorization access token to RPC client in asynchronous way (amplify auth/cognito)

Im trying to use RPC but I use AMPLIFY AUTH and i want to append the access token in each rpc clients.

const client = hc<typeof adminApp>(process.env.NEXT_PUBLIC_API_URL!, {
  headers: {
    Authorization: `Bearer async-token-goes-here`,
  },
});

const client = hc<typeof adminApp>(process.env.NEXT_PUBLIC_API_URL!, {
  headers: {
    Authorization: `Bearer async-token-goes-here`,
  },
});

the problem is the way i retrieve my access token is async as cognito will refresh the token if needed. Is it bad to make the RCP client async?

export const adminsRpc = async () => {
  const token = await getAccessToken();
  const client = hc<typeof adminApp>(process.env.NEXT_PUBLIC_API_URL!, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });
  return client;
};

const getAccessToken = async () => {
  const session = await fetchAuthSession();
  if (!session.tokens) {
    throw new Error("No session");
  }
  return session.tokens.accessToken.toString();
};

export const adminsRpc = async () => {
  const token = await getAccessToken();
  const client = hc<typeof adminApp>(process.env.NEXT_PUBLIC_API_URL!, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });
  return client;
};

const getAccessToken = async () => {
  const session = await fetchAuthSession();
  if (!session.tokens) {
    throw new Error("No session");
  }
  return session.tokens.accessToken.toString();
};

... would be used lke this but i dont like it :

  useEffect(() => {
    const fetchData = async () => {
      const client = await adminsRpc(); // <---- i dont like this 
      const res = await client.admins.$get();
      if (!res.ok) {
        console.error(res);
        return;
      }
      const data = await res.json();
      console.log(data);
      setData(data);
    };

    fetchData();
  }, []);

  useEffect(() => {
    const fetchData = async () => {
      const client = await adminsRpc(); // <---- i dont like this 
      const res = await client.admins.$get();
      if (!res.ok) {
        console.error(res);
        return;
      }
      const data = await res.json();
      console.log(data);
      setData(data);
    };

    fetchData();
  }, []);

i dont like having to use it that way across my app but i guess I dont have a choice as long as my token retrieval is async?

3 replies

Gaming

Programming