Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Asynchronous filter returns a Promise object #3133

Closed
patrulea opened this issue Dec 22, 2023 · 5 comments · May be fixed by #3141
Closed

Asynchronous filter returns a Promise object #3133

patrulea opened this issue Dec 22, 2023 · 5 comments · May be fixed by #3141
Labels
education

Comments

@patrulea
Copy link

patrulea commented Dec 22, 2023 •
edited
Loading

Operating system

macOS Sonoma 14.2.1

Eleventy

2.0.1

Describe the bug

I’m writing an async filter to fetch the data of a Sanity document based on its ID.
Logging the data in the console works as expected, but trying to render the result within a template doesn’t, as it returns an empty object (Promise { <pending> }).

<code @text="sRef(reference)"></code>
module.exports = eleventyConfig => {
  eleventyConfig.addJavaScriptFunction("sRef", async reference => {
    try {
      const response = await fetch(`https://${process.env.SANITY_STUDIO_PROJECT_ID}.api.sanity.io/v${process.env.SANITY_STUDIO_API_VERSION}/data/query/${process.env.SANITY_STUDIO_DATASET}`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${process.env.SANITY_STUDIO_API_TOKEN}`
        },
        body: JSON.stringify({
          query: `*[_id == $referenceId][0]`,
          params: {
            referenceId: reference
          }
        })
      });
      if (!response.ok) {
        throw new Error(`Error fetching data: ${response.statusText}`);
      }
      const data = await response.json();
      return data.result;
    } catch (error) {
      console.error(`Error fetching data from Sanity: ${error.message}`);
      return null;
    }
  })
}

This is a WebC template but I don’t think it’s related to that.
@Snapstromegon
Copy link
Member

Hey @patrulea,
I tried reproducing your issue, but wasn't able too. I created a Gist here with my experiment:
https://gist.github.com/Snapstromegon/1f643930a37d0383f414eb2bfc8492dc

As far as I can tell async filters should work correctly. In my test I just switched the sanity endpoint to swapi.dev. Maybe you could create a reproducable git repo or something, so I can test it with your code.

@Snapstromegon Snapstromegon added the needs-reproduction Having trouble reproducing! Can anyone confirm? label Dec 30, 2023
@patrulea
Copy link
Author

https://github.com/patrulea/issue-3133

There it is. Logging the data from the filter does result in what I’m expecting. Though, logging it from the template (through the Eleventy log() helper results in an empty Promise object (as described above).

@Snapstromegon
Copy link
Member

Ahh, that's the issue.
Yes, the log filter currently doesn't await the promise before logging it.
A workaround for this in cases where you can't await the value before passing it into the log filter is, to use the .then method of the Promise like this:

<code @text="sRef('movie_10681').then(log)"></code>

In my opinion it would be nice to change the log filter to await the value by default. That way you could use the filter like you expected to above.

@Snapstromegon Snapstromegon mentioned this issue Dec 31, 2023
Open
@patrulea
Copy link
Author

oooh right. I successfully rendered the fetched data with sRef('movie_10681').then(JSON.stringify). But how can I use it to access the keys? An <h2> with the title found in the fetched object, for example.

@zachleat
Copy link
Member

JSON.stringify(await sRef('movie_10681')).propertyName should do the trick, I think! Sorry for the late reply!

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and we will reopen the issue. Thanks!

@zachleat zachleat added education and removed needs-triage needs-reproduction Having trouble reproducing! Can anyone confirm? labels Oct 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
education
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

add: make log filter async friendly by adding logAsync Snapstromegon/eleventy
3 participants
@zachleat @Snapstromegon @patrulea