#typescript sdk

81 messages · Page 1 of 1 (latest)

rigid bear
#

Can we use the directus sdk with typescript ? I have many difficulties about ^^

robust plazaBOT
#

Thanks for posting! This is a community powered server, so you may or may not get an answer based on available help and expertise. To increase your chances of somebody being able to help you, please help us help you making sure you:

  • Adding an explanation of exactly what you're trying to achieve.
  • Adding any and all related code or previous attempts.
  • Describing the exact issue or error you are facing.
  • Posting any screenshots if applicable.
  • Reading through https://stackoverflow.com/help/how-to-ask.

When you're done with this thread, please close it. Thanks! ✨

(If you have a support agreement and need help, please contact the core team via email.)

rigid bear
#

for exemple on my function to get an article (i do it by ud for the moment to test)

async getArticle(categorySlug: string, articleSlug: string): Promise<Article> {
        // return await fetch<DirectusDataWrapper<Article>>()
        const { $directus, $readItem } = useNuxtApp()
        const client = createDirectus<Article>("https://app-a3cd0e1f-38cc-4acc-94e4-ba314354b429.cleverapps.io/").with(rest());

        const article = await useAsyncData(`article-${categorySlug}-${articleSlug}`, () => {
            return client.request(readItem('Article', 1));
        })
    }
gleaming lintel
fierce merlin
#

You have to declare the Schema with all the data you will use. even if it's not an entity and for example you need it in a deep query with field

rigid bear
#

hello there,

sorry for my late answser

the version is "@directus/sdk": "^11.0.1"

rigid bear
rigid bear
rigid bear
rigid bear
#

?

fierce merlin
#

Sorry I wasn't on my computer. I Show you

# 
import { ICity } from "@/utils/interfaces/ICity";
import { IColor } from "@/utils/interfaces/IColor";
import { IDepartment } from "@/utils/interfaces/IDepartment";
import { IDesigner } from "@/utils/interfaces/IDesigner";
import { IFile } from "@/utils/interfaces/IFile";
import { IFitting } from "@/utils/interfaces/IFitting";
import { IInfos } from "@/utils/interfaces/IInfos";
import { IKitchen } from "@/utils/interfaces/IKitchen";
import { IMenu, ISubMenu } from "@/utils/interfaces/IMenu";
import { IPage } from "@/utils/interfaces/IPage";
import { IPartner } from "@/utils/interfaces/IPartner";
import { IStyle } from "@/utils/interfaces/IStyle";
import { ISurface } from "@/utils/interfaces/ISurface";
import { createDirectus, rest } from "@directus/sdk";

export interface Schema {
  atmosphere: IStyle[];
  city: ICity[];
  color: IColor[];
  departments: IDepartment[];
  designer: IDesigner[];
  avatar: IFile;
  intervention_area: {city_id: ICity}[];
  facilities: IFitting[];
  infos: IInfos[];
  design: IKitchen[];
  layout: IPage[];
  material: IPage[];
  menu: IMenu[];
  partner: IPartner[];
  surfaces: ISurface[];
}

const directus = createDirectus<Schema>(process.env.NEXT_PUBLIC_DIRECTUS_URL as string).with(rest());

export default directus;```
#

The Schema contains all my entity name (the real name on your SQL table for example) and the appropriate type or interface from your Typescript file

#

I think you can also override native directus entity in order to add some extra field

rigid bear
fierce merlin
#

That's because my tables are singular too

rigid bear
fierce merlin
#

if yours are plural you have to put the exact same name, like you would do in classical rest fetch

#

a simple function with the rest sdk would be:

export const getAllFittings = async () => {
  return await directus.request(readItems("facilities"));
};```
#

you can see this time my table is not singular (This is not good, better have to get all you table named the same way ^^)

rigid bear
fierce merlin
#

So to get allFiting data on my front end I only have to do this :
const allFitings = await getAllFittings();

rigid bear
fierce merlin
#

you try to await?

#

I can see you are trying to get some slug also

#

it's might be a filter option

#

like so:

# 
export const findFittingBySlug = async (slug: string) => {
  return await directus.request(
    readItems("facilities", {
      filter: {
        slug: { _eq: slug },
      },
      limit: 1,
    })
  );
};```
#

You are not passing an url like with rest

#

the SDK help you to make it simple if you want you can use fetch with an url to call you API

#

If it's easier for you to understand don't use SDK

#

With SDK you are automatically calling the endpoint of an entity then you can pass some query to filter (getAll, limit to 1, or filtering with specific comparison

#

regardind the request method have you tried import your client in another file?

rigid bear
#

Before to abord and switch to traditionnal fetch. Can you tell my which version of directus sdk are you using ? please

fierce merlin
#

I check

#

"^11.0.2"

#

try to upgrade maybe

rigid bear
fierce merlin
#

and maybe try not to encapsulate it in another function 🤷🏻‍♂️

rigid bear
#

It's very strange. Nothing output else that nuxt

image.png
#

May be it's the visual studio code autocompletion

#

who don't find the request method

fierce merlin
#

I'm on VS Code

#

So I don't think so

#

Maybe it's because you try to declare your client in a class

rigid bear
#

🤔

fierce merlin
#

have you tried create a simple ts file with only the directus client

rigid bear
#

I will try now

fierce merlin
#

Ok. At least you can be sure ^^

rigid bear
#

Still the same problem. Request functions is not here

fierce merlin
#

looks weird

#

try to npm update maybe

rigid bear
fierce merlin
#

and you're still on 11.0.1 ?

rigid bear
#

no

#

"@directus/sdk": "^11.0.2"

fierce merlin
#

Ok ok

#

as for me so you should have required

rigid bear
#

Do you have directus in your node_packages

image.png
#

node_modules *

fierce merlin
#

yes

rigid bear
#

I don't have

#

very strange

fierce merlin
#

But I'm using next not nuxt

#

and directus is in Vue maybe that's an explanation

#

can you try creating a new empty project?

rigid bear
#

I will switch to simple fetch implementation

#

Than'ks for your help

fierce merlin
#

No problem. Sorry it still not work

rigid bear
#

Do you have a rest folder here ?

#

sorry, last question

rigid bear
fierce merlin
#

Yes I can see my import goes to dist/index maybe it's a config matter of the import of your repo.

#

As you can see I only import the module and it litteraly goes to the correct url