Global variables #15054

denny7 · 2020-07-10T11:58:16Z

denny7
Jul 10, 2020

Hello! I would like to create a variable in server.js and use it everywhere in application. I need to make a call to an API and get a list (with categories) which I will use in my application. The list will not be changed so I need to make a call to the API only once and store it somewhere. I would like to make something like getStaticProps does but for the whole app (not only for one page). As I understood I can't use getStaticProps in _app.js. How can I achive that? Thanks.

jamesmosier · 2020-07-10T13:53:30Z

jamesmosier
Jul 10, 2020

There is currently no mechanism to statically fetch site wide data from an API in _app.js.

You could use getInitialProps inside _app but this would then force all of your pages to be server side rendered and opt out of static optimizations.

2 replies

denny7 Jul 10, 2020
Author

getInitalProps will be called for every page(and API call too). I would like to make a call to API only once at build time.

jamesmosier Jul 10, 2020

There is currently no mechanism to statically fetch site wide data from an API in _app.js.

SergeyRe · 2020-09-07T04:38:32Z

SergeyRe
Sep 7, 2020

It loooks like my case. Generally i pull product data from contentful. But there is part of data that are fast changed (price,availability) and i get it from external API. Right now i first push them to contentful and then pull again for nextjs.
the problem is that process of writing to contentful is not quick enough
The idea i dont know how to realize is to get that data just before static generation and export as global variable and then use in process of generation.
Any idea?

0 replies

aralroca · 2020-11-04T08:57:05Z

aralroca
Nov 4, 2020

Maybe you can use runtime configuration for that: https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration

3 replies

denny7 Dec 7, 2020
Author

How can I make an API call and store its response in runtime configuration?

acarolinafbarros Feb 24, 2022

@denny7
I have the same question.
I need to store a value that is retrieved by API call in runtime. Ideas?

Raygud Jun 17, 2022

You can save it as session storage or browser storage depending on how long you need the availability

megetron · 2020-12-08T03:52:02Z

megetron
Dec 8, 2020

having the same issue here.

one solution might be:

generating from the database/cms a json file and use it in your _app.js as shown here
optional is to use react context as shown here
build your data on build time. changing the webpack like shown here
OR

{
  webpack: (config, { isServer }) => {
  if (isServer) {
    require('./scripts/generate-json');
  }

  return config;
}

0 replies

connor4312 · 2021-04-26T05:09:31Z

connor4312
Apr 26, 2021

We can use Symbol.for and the Node global for this. (You could also use plain strings, but symbols reduce the chance of influencing things you don't mean to.) For TypeScript, I made this helper class:

export class GlobalRef<T> {
  private readonly sym: symbol;

  constructor(uniqueName: string) {
    this.sym = Symbol.for(uniqueName);
  }

  get value() {
    return (global as any)[this.sym] as T | undefined;
  }

  set value(value: T) {
    (global as any)[this.sym] = value;
  }
}

Then I can use it like:

const databaseConn = new GlobalRef('myapp.database');
if (!databaseConn.value) {
  databaseConn.value = setupDatabaseConnection();
}

export const database = databaseConn.value;

You can use this for plain JS too, just remove the type annotations :)

3 replies

jajvisser Dec 15, 2022

Thank you this solved our exact problem.

We noticed when we called a constant from a getServerSideProps or pages/api/refresh.ts it would create 2 instances of a service. This pattern makes sure we only have 1 service shared between a page and api.

glassdimlygr May 8, 2023

I have tested and the following works. Excuse me but... WTF 💥 . Why does it work? Why don't normal globals work? Why does this weird casting work? I usually understand things, but this I do not. What do I need to understand why this forces nextjs to share a global between routes? And furthermore... WHY DOESN'T NEXTJS SHARE A GLOBAL BETWEEN ROUTES?! WHAT MADNESS IS THIS?

We can use Symbol.for and the Node global for this. (You could also use plain strings, but symbols reduce the chance of influencing things you don't mean to.) For TypeScript, I made this helper class:
export class GlobalRef<T> {
  private readonly sym: symbol;

  constructor(uniqueName: string) {
    this.sym = Symbol.for(uniqueName);
  }

  get value() {
    return (global as any)[this.sym] as T | undefined;
  }

  set value(value: T) {
    (global as any)[this.sym] = value;
  }
}
Then I can use it like:
const databaseConn = new GlobalRef('myapp.database');
if (!databaseConn.value) {
  databaseConn.value = setupDatabaseConnection();
}

export const database = databaseConn.value;
You can use this for plain JS too, just remove the type annotations :)

codenomnom Aug 26, 2024

This does not seem to work as of today 👀

jacobgraf · 2021-06-20T19:07:06Z

jacobgraf
Jun 20, 2021

I need to accomplish this exact same thing. There has to be a way, right?

Like @denny7 mentioned, at build time only, I need to hit a couple of APIs, mutate the returned object a bit, cache that mutated object, and then access that object from anywhere in my app. The data (on the server/api side) will not change frequently. If/when it does, I will trigger another build cycle.

It's essentially the same functionality as getStaticProps, but for a globally-accessible variable/object.

Anyone else have any other creative solutions? Seems like this would be a pretty handy thing to have in cases where your data won't change to much and there is no need to continually re-fetch that sitewide data.

2 replies

donovanperalta Jun 22, 2021

I had to do something similar with a database connection in my Next app, since a new instance was being generated on every request. There are ways to avoid this problem using API routes with middleware, but I wanted to keep it as simple as possible. So, in your case, the solution would look something like this:

/* next.config.js */

// The data needs to be fetched synchronously:
const fetch = require('sync-fetch');

// Get the data you need - This could be moved into a separate file
function getStaticData() {
  return fetch('https://jsonplaceholder.typicode.com/todos/1').json();
}

const staticData = getStaticData();

module.exports = () => {
  return {
    serverRuntimeConfig: { staticData }
  };
};

Then you can simply create an API route that will serve this static data:

/* pages/api/static-data */

import getConfig from 'next/config';

const { serverRuntimeConfig } = getConfig();
const { staticData } = serverRuntimeConfig;

function handler(req, res) {
  res.json(staticData);
};

export default handler;

LOVELYZOMBIEYHO Jun 16, 2022

It's work! but is it only fetch on the first time of loading if I am doing a dynamic navbar through connected to the backend. I don't want to fetch every time refresh pages.

lawrencejob · 2022-01-12T19:50:56Z

lawrencejob
Jan 12, 2022

FIrstly, Vercel and Next.js has changed front-end engineering for me, so in case an author sees this, thank you very much!

Secondly, apologies for resurrecting an old thread, but I found this while researching a solution to a problem I keep running into.

I have an _app with a <Navbar> component, which has drop-downs which populate from a call to my CMS. I don't want to put the Navbar into one of the pages (and optimise out the repeated calls to render that component) because I'd have to restructure the app quite significantly, and there's a lot of interesting stuff in the header that I wouldn't want to deal with the intricacies of being added and removed on page transitions.

So far, I'm using a client-side call to my CMS to get the navbar contents on page load (passing the inconvenience to the user), but this doesn't feel ideal.

There are a bunch of places both at work and on this project where it would be nice to load in (sometimes rich-) content for reuse at some global level, or the app, but keep the benefits of static rendering. It would be ideal if it turns out I'm missing something obvious, or if this is something in consideration for the project roadmap?

I've attached a mockup if it helps to visualise chat I'm stuck on:

0 replies

MBelniak · 2024-02-15T19:04:01Z

MBelniak
Feb 15, 2024

I tried using inversify and following this example I managed to achieve a global database instance (at least it seems to work, but it's not field tested):

import { Container, injectable } from 'inversify';
import sdk from 'node-appwrite';
import { client } from '@/database/appwrite';
import 'reflect-metadata';

export abstract class AbstractDatabaseClient {
    abstract getClient(): sdk.Databases;
}
@injectable()
export class DatabaseClient implements AbstractDatabaseClient {
    private databases: sdk.Databases;
    constructor() {
        client
            .setEndpoint('https://cloud.appwrite.io/v1')
            // ... further initialization

        this.databases = new sdk.Databases(client);
    }

    getClient(): sdk.Databases {
        return this.databases;
    }
}

const container = new Container();

if (typeof window === 'undefined') {
    container
        .bind<AbstractDatabaseClient>(AbstractDatabaseClient)
        .to(DatabaseClient);
}

// Usage:
container.get(AbstractDatabaseClient).getClient();

0 replies

ogbotemi-2000 · 2024-06-19T19:33:21Z

ogbotemi-2000
Jun 19, 2024

Hello, I recently migrated my web app to Vercel from Railway and developed a working solution, which can be found here: https://rmrf-css.vercel.app, for the topic of this discussion.
Here are my observations and solutions

On Railway, everything works as expected of a Node.js server and the global object in my server.js file stores data throughout the runtime of the server.
Ensuring this behavior on serverless Vercel required mimicking storing and reading values in objects by using the file system as shown below and reading/writing to the /tmp/ directory to avoid errors due to a violation of writing files on the server.
To avoid the issue of having to serialize URLs into valid filenames for saving their responses, a uuid is generated and used as the filename of the URLs' responses, it is then sent to the client among the response for the initial request and sent back by the client to be used as a unique string bearing the name of the file to be read similar to using an object in uniqueness and versatility.

/* store.js */
let fs     = require('fs'),
    uuid   = (a) => (a ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16) : ([1e7]   -1e3   -4e3   -8e3   -1e11).replace(/[018]/g, uuid)),
    /* may be made asynchronous */
    rm     = id=>fs.unlinkSync(path.join(dir, id '.txt')),
    dir    = '/tmp/',
    path   = require('path');

/*writes/reads data as text/plain, open to modifications*/
module.exports = {
  read: id =>new Promise((resolve, reject)=>fs.readFile(dir id '.txt', (err, buffer)=>{
      if(err) reject(err);
      else resolve(buffer.toString())
    })
  ),
  write: function(data, cb, id) {
    fs.writeFile(dir (id=uuid()) '.txt', data, _=>cb(id))
  },
  rm 
}

Here is how I use it and how it may be used in the wild

let store  = require('./store');
module.exports = async function(request, response, uuid) {
  let {url, id} = request.query;
  if(uuid = await store.read(id)) {
    /* exists */
    response.send(/* data */),
    /* you may remove the file or leave it since the contents of the /tmp/ directory are likely temporary */
    store.rm(uuid)
  } else {
    store.write('data', function(id) {
       /* send the unique id for the stored data in some way as JSON or text */
       response.send(id)
    })
  }
}

I hope it serves as a viable workaround to the issue with using global variables in Vercel serverless backends

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Global variables #15054

{{title}}

Replies: 9 comments 10 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Global variables #15054

Replies: 9 comments · 10 replies

denny7 Jul 10, 2020 Author

denny7 Dec 7, 2020 Author

Replies: 9 comments 10 replies

denny7 Jul 10, 2020
Author

denny7 Dec 7, 2020
Author