saeho•3mo ago

Deno is not defined

Is "Deno" supposed to be defined on the front-end client? I'm trying to get a simple app working using Fresh framework, but even on a fresh install of Fresh app, Deno is not defined in client, which causes a LOT of necessary Deno modules to not work (for example, "graphql-request"). Is this a bug on Deno? Or is there another way I'm suppose to do this?

2 Replies

Deno AI Helper•3mo ago

The Deno namespace is not available in the front-end client environment because it is specific to the Deno runtime, which operates on the server-side. The Fresh framework, as mentioned in the documentation, is designed to send no JavaScript to clients by default, and it uses an islands architecture to send client-side JavaScript on a component basis when necessary. When you're working with Fresh and you need to make requests to a GraphQL API from the client-side, you should not use Deno-specific modules like graphql-request directly in the client-side code. Instead, you should use standard web APIs available in the browser, such as fetch, to make HTTP requests from the client-side. Here's a general approach you can take to make a GraphQL request from the client-side using fetch:

const query = `{
  yourGraphQLQuery {
    field1
    field2
  }
}`;

fetch('/your/graphql/endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  body: JSON.stringify({ query }),
})
.then(response => response.json())
.then(data => console.log('data returned:', data));

const query = `{
  yourGraphQLQuery {
    field1
    field2
  }
}`;

fetch('/your/graphql/endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  body: JSON.stringify({ query }),
})
.then(response => response.json())
.then(data => console.log('data returned:', data));

Remember to replace /your/graphql/endpoint with the actual endpoint you're querying, and yourGraphQLQuery with your specific GraphQL query. For server-side logic in Fresh, you can use Deno-specific modules and the Deno namespace as needed, since that code runs in the Deno runtime. But for anything that runs on the client-side, you'll need to stick to what's available in the browser environment. 🦕

Helpful Links: Web Frameworks Deno 1.22 Release Notes Announcing native npm support on Deno Deploy How to publish Deno modules to NPM Deno 1.28: Featuring 1.3 Million New Modules Fresh 1.1 - automatic JSX, plugins, DevTools, and more Node.js's Config Hell Problem Deno Runtime Quick Start | Deno Docs How to Build an E-commerce Site with a Perfect Lighthouse Score

saeho•3mo ago

interesting, tyvm.