Customized node-fetch instance for source?

fancheng33 · 16 January 2021 20:32

Description

In our cloud infra, Node.js services (including the ones just for SSR) use standardized basic libraries/middlewares to make sure common DevOps operations such as observability of the service can be enforced, and engineers can achieve this goal by using the internally published such NPM packages.

One example of such libraries is a custom-configured node-fetch instance - standardizing things such as logging, universal request id generation, etc.

Looks like Frontity uses node-fetch library for the source package (implemented by wp-source):

Currently it doesn’t look like this node-fetch instance can be customized officially as a supported feature of Frontity. I’m requesting this for the reasons explained above.

Examples

Functionalities

Allow passing in one or more of the following for node-fetch customizations:

an already configured/wrapped node-fetch instance
an option object to configure all node-fetch supported options

Requirements

Dependencies

Possible solution

To make such customizations more scalable/flexible, an alternative architecture choice is to allow registering custom Koa middlewares, but it might be tricky since Frontity support both SSR/CSR and it’s hard to make the middlewares isomorphic.

SantosGuillamot · 10 February 2021 13:06

@luisherranz Could this be related to the Server Extensibility feature somehow? Is this something that will be covered there or it’s something different?

luisherranz · 11 February 2021 18:47

@fancheng33 would something like this help?

github.com

luisherranz/fetch-wrapper-demo/blob/master/packages/strattic-frontity/src/index.js

import * as frontity from "frontity";

// Save the reference to the original `fetch`.
const originalFetch = frontity.fetch;

// Send the requested URL to a backend.
const saveRequest = (backend, args) => {
  originalFetch(backend, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ url: args[0], options: args[1] }),
  });
};

export default () => {
  return {
    name: "@strattic/frontity",

This file has been truncated. show original

If so, maybe you can create a Frontity package that does just that and it is abstracted from your other packages, can be installed in multiple projects, and so on.

fancheng33 · 27 March 2021 21:23

Thanks for the tips. I did try this approach, but got the webpack build error because some dependencies related to server-side logging do not work in the browser.

ERROR in ./node_modules/https-proxy-agent/index.js
Module not found: Error: Can't resolve 'tls'

Similar to an issue in Next.js:

Is there a way to only require/import server-side or client-side dependencies in the code bundled by running frontity dev and frontity build? E.g.: reference an environment variable injected by frontity.

luisherranz · 7 April 2021 11:22

Yes, you can use different entry points for the client and the server: src/client.js and src/server.js.

https://docs.frontity.org/learning-frontity/packages#entry-points

fancheng33 · 20 April 2021 08:01

It worked, thanks!
Looking forward to the official server extensibility project though, then we can use Koa middlewares to wire server-side libraries up more easily.