vector•3y ago

Ids as strings

44 Replies

hey! yeah, the issue is that parcel._id is a special Id class, not a plain string. when you put it into the URL with string substitution, it calls Id.toString() on it. so, what you can do is...

const idString = useParams();
const id = new Id("parcels", idString);
const parcel = useQuery("getParcels:getParcel", id) || {};

const idString = useParams();
const id = new Id("parcels", idString);
const parcel = useQuery("getParcels:getParcel", id) || {};

(assuming the name of the table is "parcels") lmk if that works

vectorOP•3y ago

what do I import for Id? for if im not using TS ok figured it out

vectorOP•3y ago

im getting this error now

vectorOP•3y ago

get parcel looks like this

sujayakar•3y ago

ah, okay! so you need to change your URL to

href={`/order/${props.parcel._id.toString()}`}

href={`/order/${props.parcel._id.toString()}`}

vectorOP•3y ago

same issue

sujayakar•3y ago

huh, can you console.log(idString) and see what it's printing out? before the useQuery

vectorOP•3y ago

sshader•3y ago

What are you importing to create your Id? There should be a class in convex/_generated/dataModel.js I believe

vectorOP•3y ago

yep

sujayakar•3y ago

also, I think changing it to

const id = new Id("parcels", idString.id);

const id = new Id("parcels", idString.id);

should work (i thought useParams returns a string but it's actually an object ^^)

vectorOP•3y ago

yep, it works thank you! lifesaver

sshader•3y ago

Yeah sorry -- I assumed you were printing the Id and not the useParams. Glad everything's working now 🎉

vectorOP•3y ago

@sujayakar this is printing out undefined

vectorOP•3y ago

for both items

vectorOP•3y ago

but these fields exist in my database

lee•3y ago

useQuery will return undefined on the initial render. After the query finishes executing, it will trigger a rerender that should have the result of the query

vectorOP•3y ago

it appears to always show undefined

sujayakar•3y ago

can you console.log(parcel)?

vectorOP•3y ago

here is full code

vectorOP•3y ago

sujayakar•3y ago

ah and actually doing something like

const queryResult = useQuery("getParcels:getParcel", id);
console.log("queryResult", queryResult);
const parcel = queryResult || {};

const queryResult = useQuery("getParcels:getParcel", id);
console.log("queryResult", queryResult);
const parcel = queryResult || {};

would help too I wonder if we didn't recreate the Id correctly, which then means that db.get is always returning null

vectorOP•3y ago

sujayakar•3y ago

cool. if you go to the dashboard for your deployment, do you see the getParcels:getParcel call in the logs view?

vectorOP•3y ago

yeah, latest from 5:34AM

lee•3y ago

Even if db.get were returning null, queryResult would only be undefined before the query has finished executing. Makes me think something is getting in the way of the rerender

sshader•3y ago

Yeah I would perhaps try commenting out everything except the useQuery and console.logs in my component and see if a re-render gives us the right result

vectorOP•3y ago

everything deleted still shows up null oh i think i found the error its parcel not parcels mb

sujayakar•3y ago

ahh nice! works now?

vectorOP•3y ago

ok works when theres no react components rendering but not when i add in the return

lee•3y ago

Is it possible that on the first render, when useQuery returns undefined, the undefined value makes the component throw an exception, so the rerender never happens?

vectorOP•3y ago

possibly, but how do I fix it?

sujayakar•3y ago

can you paste the rest of the component code? after the useQuery

vectorOP•3y ago

export default function Order() {
  const idString = useParams();
  const id = new Id("parcel", idString.id);
  const queryResult = useQuery("getParcels:getParcel", id) || {};
  const parcel = queryResult;
  console.log("https://maps.google.com?q=" + parcel.lat + "," + parcel.long);

  const showInMapClicked = () => {
    window.open("https://maps.google.com?q=" + parcel.lat + "," + parcel.long);
  };

  return (
    <div className="flex flex-col min-h-screen overflow-hidden">
      {/*  Site header */}
      <Header parcel={parcel} />
      {/*  Page content */}
      <main className="grow">
        {/*  Page illustration */}
        <div
          className="relative max-w-6xl mx-auto h-0 pointer-events-none"
          aria-hidden="true">
          <PageIllustration />
        </div>

        {/*  Page sections */}
        <HeroOrder />

        <div className="max-w-xs mx-auto sm:max-w-none sm:flex sm:justify-center">
          <div data-aos="fade-up" data-aos-delay="400">
            <a
              className="btn text-white bg-purple-600 hover:bg-purple-700 w-full mb-4 sm:w-auto sm:mb-0"
              href="SignIn">
              Purchase
            </a>
          </div>
          <div data-aos="fade-up" data-aos-delay="600">
            <a
              className="btn text-white bg-gray-700 hover:bg-gray-800 w-full sm:w-auto sm:ml-4"
              onClick={showInMapClicked}>
              View in maps
            </a>
          </div>
        </div>
        <Features />
        <Testimonials />
        <ParcelList />
      </main>

      {/*  Site footer */}
      <Footer />
    </div>
  );

export default function Order() {
  const idString = useParams();
  const id = new Id("parcel", idString.id);
  const queryResult = useQuery("getParcels:getParcel", id) || {};
  const parcel = queryResult;
  console.log("https://maps.google.com?q=" + parcel.lat + "," + parcel.long);

  const showInMapClicked = () => {
    window.open("https://maps.google.com?q=" + parcel.lat + "," + parcel.long);
  };

  return (
    <div className="flex flex-col min-h-screen overflow-hidden">
      {/*  Site header */}
      <Header parcel={parcel} />
      {/*  Page content */}
      <main className="grow">
        {/*  Page illustration */}
        <div
          className="relative max-w-6xl mx-auto h-0 pointer-events-none"
          aria-hidden="true">
          <PageIllustration />
        </div>

        {/*  Page sections */}
        <HeroOrder />

        <div className="max-w-xs mx-auto sm:max-w-none sm:flex sm:justify-center">
          <div data-aos="fade-up" data-aos-delay="400">
            <a
              className="btn text-white bg-purple-600 hover:bg-purple-700 w-full mb-4 sm:w-auto sm:mb-0"
              href="SignIn">
              Purchase
            </a>
          </div>
          <div data-aos="fade-up" data-aos-delay="600">
            <a
              className="btn text-white bg-gray-700 hover:bg-gray-800 w-full sm:w-auto sm:ml-4"
              onClick={showInMapClicked}>
              View in maps
            </a>
          </div>
        </div>
        <Features />
        <Testimonials />
        <ParcelList />
      </main>

      {/*  Site footer */}
      <Footer />
    </div>
  );

lee•3y ago

In my convex apps i sometimes do something like if (queryResult === undefined) { return <div>Loading...</div> }

vectorOP•3y ago

doesnt work for me

vectorOP•3y ago

fixed thanks

sshader•3y ago

(was going to tell you to remove the || {} but looks like you figured it out!)

Ids as strings

Did you find this page helpful?