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.

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

feat: add initial support to pages for server-side data fetching #446

Merged
merged 23 commits into from
Jun 8, 2023

Conversation

brandonroberts
Copy link
Member

@brandonroberts brandonroberts commented May 30, 2023

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Other... Please describe:

Which package are you modifying?

  • vite-plugin-angular
  • vite-plugin-nitro
  • astro-angular
  • create-analog
  • router
  • platform
  • content
  • nx-plugin
  • trpc

What is the current behavior?

Closes #197

What is the new behavior?

Adds initial support for fetching data for pages from the server.

Example:

// src/app/pages/index.server.ts
import { PageServerLoad } from '@analogjs/router';

export const load = async ({
  params, // params/queryParams from the request 
  req, // H3 Request
  res, // H3 Response handler
  fetch // internal fetch for direct API calls 
}: PageServerLoad) => {
  return {
    loaded: true,
  };
};
// src/app/pages/index.page.ts
import { Component } from '@angular/core';
import { LoadResult, injectLoad } from '@analogjs/router';

import { load } from './index.server'; // not included in client build

@Component({
  standalone: true,
  template: `
    <h2>Home</h2>

    Loaded: {{ data().loaded }}
  `,
})
export default class BlogComponent {
  // with route componentInputBinding enabled -> https://angular.io/api/router/withComponentInputBinding
  @Input() load(data: LoadResult<typeof load>) {
    console.log(data); // logs { loaded: true }
  }

  // with useLoad function
  data = toSignal(injectLoad<typeof load>(), { requireSync: true });
}

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

TODO

  • Add types for load function
  • Add useLoader or injectLoader function as alternative to route component input binding
  • Add docs
  • Update analog-app example to server-side data fetching

[optional] What gif best describes this PR or how it makes you feel?

@netlify
Copy link

netlify bot commented May 30, 2023

Deploy Preview for analog-app ready!

Name Link
🔨 Latest commit bd41e1e
🔍 Latest deploy log https://app.netlify.com/sites/analog-app/deploys/6480fb1193c1830008dcdeee
😎 Deploy Preview https://deploy-preview-446--analog-app.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented May 30, 2023

Deploy Preview for analog-blog ready!

Name Link
🔨 Latest commit bd41e1e
🔍 Latest deploy log https://app.netlify.com/sites/analog-blog/deploys/6480fb11e8e18f0008a2a2e6
😎 Deploy Preview https://deploy-preview-446--analog-blog.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented May 30, 2023

Deploy Preview for analog-docs ready!

Name Link
🔨 Latest commit bd41e1e
🔍 Latest deploy log https://app.netlify.com/sites/analog-docs/deploys/6480fb110b807c000897577e
😎 Deploy Preview https://deploy-preview-446--analog-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@brandonroberts brandonroberts force-pushed the feat-server-data-fetching branch 2 times, most recently from cf690db to c19ddcf Compare May 31, 2023 03:30
@brandonroberts brandonroberts marked this pull request as ready for review May 31, 2023 03:41
Copy link
Member

@goetzrobin goetzrobin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a couple minor comments. Definitely not blocking! Super excited for this 🚀

@brandonroberts brandonroberts force-pushed the feat-server-data-fetching branch from 519bfa6 to 420711c Compare June 7, 2023 02:31
@brandonroberts brandonroberts force-pushed the feat-server-data-fetching branch from d9bded7 to 6fced2d Compare June 7, 2023 13:55
Copy link
Member

@goetzrobin goetzrobin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🚀🚀🚀🚀🚀

packages/router/src/lib/route-types.ts Outdated Show resolved Hide resolved
packages/router/src/lib/routes.ts Outdated Show resolved Hide resolved
packages/router/src/lib/use-load.ts Outdated Show resolved Hide resolved
packages/router/src/lib/use-load.ts Outdated Show resolved Hide resolved
packages/router/src/lib/routes.ts Outdated Show resolved Hide resolved
Copy link
Member

@markostanimirovic markostanimirovic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥

@brandonroberts brandonroberts merged commit 9d1b0f8 into main Jun 8, 2023
@brandonroberts brandonroberts deleted the feat-server-data-fetching branch June 8, 2023 02:28
Villanuevand pushed a commit to Villanuevand/analog that referenced this pull request Sep 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

RFC: Introduce server-side data fetching for components
3 participants