Resouces

The resourcer are objects that we use to communicate with an API and retrive data to our components. To establish this communication we use Axios as a HTTP client, so we can fetch data from internet without a problem. Another library that you need to be used to is ApiSauce wich gives axios access to information like "Something gone wrong?", "What did the api return?".

Nathan has developed a simple way to create resources into this repository and it consists of a method called createResource() that you can find in src/cdk/resources/resource.ts. To create and use resources as components just follow the guide bellow:

1. Create a folder into src/cdk/resources with the name of your resource. For example: src/cdk/resources/teams. Here is where we'll configure our component.

2. Let's instatiate our resource. To do this, create a typescript file into the folder of the previous step and give it your resource name, just like the example: src/cdk/resources/teams/teams.ts.

3. Into the file created previously you'll need to add some code. Use the code bellow as an example and don't forget to modify it to fit your needs.

// Import the interface to fetch from API (Modify it)
import { Team } from '@tracksale/interfaces/Team';
// Import the createResource function
import { createResource } from '../resource';

// Create your resource as an instance returned by createResource
export const teamsResource = createResource<Team>('/teams');

4. As the last step, create a file named index.ts into the folder created in step 2 and export everything in your resource, just like the example:

export * from './teams';

5. To use your resource, just import it in your file, like the example bellow.

import { teamsResource } from 'relative_path_of_folder/teams';