SolidJS•16mo ago

typing CreateResource

I would like to do something like this so typescript don't show an error when using it in jsx: const [data, { mutate }] = createResource<{ dataExample: string } | undefined>(() => getData("/api/Example") ); So i can do: <p>{data()?.dataExample}</p>

25 Replies

foolswisdom•16mo ago

It should be inferred if you type (or cast) the result from getData Not sure exactly about the type parameters of createResource itself

akerbeltzOP•16mo ago

@foolswisdom but i want to reuse the getData function

Tommypop•16mo ago

const [data] = createResource(
  () => getData("/api/Example") as { dataExample: string } | undefined,
);

const [data] = createResource(
  () => getData("/api/Example") as { dataExample: string } | undefined,
);

You can just cast the result when you use it in the resource

akerbeltzOP•16mo ago

this is the error with that cast: Conversion of type 'Promise<undefined>' to type '{ dataExample: string; }' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Property 'dataExample' is missing in type 'Promise<undefined>' but required in type '{ dataExample: string; }'.ts(2352)

  const [data, { mutate }] = createResource(
    () => getData("/api/Example") as unknown as { dataExample: string } | undefined
  );

  const [data, { mutate }] = createResource(
    () => getData("/api/Example") as unknown as { dataExample: string } | undefined
  );

with the unknown first it looks like this, a bit too much i think I found another way but it implies typing the res of the getData as any Something like this(the function is not finished with the error handling it's just an example):

export const getData = async (url: string) => {
  let res: any;
  await fetch(url)
    .then((res) => res.json())
    .then((response) => {
      res = response;
    })
    .catch(function (error) {
      res = error;
    })
    .finally(() => {});
  return res;
};

export const getData = async (url: string) => {
  let res: any;
  await fetch(url)
    .then((res) => res.json())
    .then((response) => {
      res = response;
    })
    .catch(function (error) {
      res = error;
    })
    .finally(() => {});
  return res;
};

Tommypop•16mo ago

Oh it's just because getData is async Should be able to cast to

Promise<{ dataExample: string } | undefined>

Promise<{ dataExample: string } | undefined>

akerbeltzOP•16mo ago

yep it's a http request yep i tried this but don't work either

Tommypop•16mo ago

Huh it works for me

Tommypop•16mo ago

https://playground.solidjs.com/anonymous/e54be8c9-5183-4f38-b740-a7657f408d09

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Tommypop•16mo ago

Are you able to reproduce your types not working in the playground so they're easier to debug?

akerbeltzOP•16mo ago

yep but you are returning the exact object you want i can't do that it's a generic getData function the object could be any shape it works with the res typed as any

Tommypop•16mo ago

Right, so if it's generic can't you have a generic type param in the function:

const getData = async <T,>()=>{
  return await fetch("123") as T
}

const getData = async <T,>()=>{
  return await fetch("123") as T
}

akerbeltzOP•16mo ago

idk too much about generics but this don't solve too

akerbeltzOP•16mo ago

akerbeltzOP•16mo ago

maybe you can use the playground you made and make a request to a public api with the correct way to use generics https://alexwohlbruck.github.io/cat-facts/docs/endpoints/facts.html

cat-facts

Fact endpoints

Daily cat facts! 🐱

akerbeltzOP•16mo ago

I'll try to do that tomorrow if you can't is incorrect to type the res as any? this is the only way to don't get errors of typescript at the moment

Tommypop•16mo ago

Sure, gimme a couple of mins

Tommypop•16mo ago

https://playground.solidjs.com/anonymous/f96d01d6-8e43-4fed-a7e2-a6080efdd8ba

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Tommypop•16mo ago

It's fine to be honest, imo just a little nicer to cast the result within the function itself

akerbeltzOP•16mo ago

ohhh now i see Thanks i was typing

const [data, { mutate }] = createResource<{ dataExample: string } | undefined>(() =>
    getData("/api/Example")
  );

const [data, { mutate }] = createResource<{ dataExample: string } | undefined>(() =>
    getData("/api/Example")
  );

instead of

  const [data, { mutate }] = createResource(() =>
    getData<{ dataExample: string } | undefined>("/api/Example")
  );

  const [data, { mutate }] = createResource(() =>
    getData<{ dataExample: string } | undefined>("/api/Example")
  );

but the first works too idk what i was doing wrong

Tommypop•16mo ago

Haha things do sometimes just break randomly lol

akerbeltzOP•16mo ago

generics it's like another way to type an any ? what's the diference? the way you put i mean in the getData function

Tommypop•16mo ago

there's not much honestly it just removes the explicit any cast

akerbeltzOP•16mo ago

hmm i see

Tommypop•16mo ago

and it means you don't have to do the getData("url") as any as <type> every time you use it. It just becomes getData<<type>>()

akerbeltzOP•16mo ago

but i was not typing any in the call of getData only in the res var declaration inside the getData

Gaming

Programming

typing CreateResource