API Connection - Custom Block for Airtable

[Ashwin_P]

Now that the Custom Blocks have been publicly announced, I wanted to show a block that I have built.

:new_moon_with_face: Name: API Connection
It can fetch data from a JSON API and populate your table with the data.

:mag: Where is the block?
On github - https://github.com/saas-developer/airtable-api-connection

:video_camera: Demo

:studio_microphone: I also have a course on building custom blocks on Udemy (I hope its not against the rules to post this)

:dollar: Hope this inspires your hackathon block and you get the $10,000

[Lauren_F]

I’m running into an issue while trying to run this custom block.

Bundle Error: Cannot find module ‘./app/styles/main.js’

Any ideas on how to fix this?

[Ashwin_P]

What steps have you followed to run the block ? Maybe you missed something ?

[Lauren_F]

I followed the instructions in the YouTube tutorial. I was able to get a hello world block working correctly, but this error came up when I tried to compile the custom block from the GitHub Repo.

It looks like it’s trying to access a main.js file in the frontend/app/styles/ director when only a main.scss file exists.

This module could really help my project, so any help troubleshooting would be greatly appreciated.

[Ashwin_P]

You can either

1. Remove import statement for main.js and get it working. But styles wont work.
   OR
2. Compile the styles (main.scss) into a string (main.js) using this project
   https://github.com/saas-developer/airtable-build-styles

[Lauren_F]

Thanks, I think that helped. Now I’m getting a different error:
/Users/xxx/.nvm/versions/node/v12.18.3/lib/node_modules/@airtable/blocks-cli/transpiled/src/builder/frontend/app/styles/main.js: Unexpected token, expected “;” (1:5)

1 | body {
| ^
2 | background: #DCEEFB;
3 | padding: 20px;
4 | }

[Ricardo_Campos]

Hello @Ashwin_P

Can this API Connection custom block do a GET and POST request?

Thanks for sharing

[Ashwin_P]

Yes, it should work for all methods

[Ricardo_Campos]

Hello @Ashwin_P

Do you know if I can identify which column and line I changed on my list for only do a POST request only on the changes. Can you guide me to the right direction?

Regards