Skip to content

[Next 13] Fix QueryResponseCache for Preloaded Queries #292

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[Next 13] Fix QueryResponseCache for Preloaded Queries #292

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7cd8737
Fix QueryResponseCache usage for Preloaded Queries
baristikir May 7, 2023
f7ee9f4
Fix Infinite Rerender Loop for Environment Creation
baristikir May 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions issue-tracker-next-v13/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import { RelayEnvironmentProvider } from "react-relay";
import { getCurrentEnvironment } from "src/relay/environment";
import { createEnvironment } from "src/relay/environment";
import "styles/globals.css";

import styles from "styles/layout.module.css";
Expand All @@ -11,7 +11,7 @@ export default function RootLayout({
}: {
children: React.ReactNode;
}) {
const environment = getCurrentEnvironment();
const environment = createEnvironment();
Copy link
Author

@baristikir baristikir May 7, 2023

Choose a reason for hiding this comment

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

Noticed that this could potentially result in an infinite rerender loop.

env-infinite-rerender.mov


return (
<html>
Expand Down
44 changes: 25 additions & 19 deletions issue-tracker-next-v13/src/relay/environment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
} from "relay-runtime";

const HTTP_ENDPOINT = "https://api.github.com/graphql";
const IS_SERVER = typeof window === typeof undefined;
const CACHE_TTL = 5 * 1000; // 5 seconds, to resolve preloaded results

export async function networkFetch(
Expand Down Expand Up @@ -56,14 +55,7 @@ export async function networkFetch(
return json;
}

export const responseCache: QueryResponseCache | null = IS_SERVER
? null
: new QueryResponseCache({
size: 100,
ttl: CACHE_TTL,
});

function createNetwork() {
function createNetwork(responseCache: QueryResponseCache) {
async function fetchResponse(
params: RequestParameters,
variables: Variables,
Expand All @@ -86,20 +78,34 @@ function createNetwork() {
return network;
}

function createEnvironment() {
return new Environment({
network: createNetwork(),
store: new Store(RecordSource.create()),
isServer: IS_SERVER,
function createQueryCache() {
return new QueryResponseCache({
size: 100,
ttl: CACHE_TTL,
});
}

export const environment = createEnvironment();
export function createEnvironment() {
const cache = createQueryCache();
const network = createNetwork(cache);
const store = new Store(RecordSource.create());

export function getCurrentEnvironment() {
if (IS_SERVER) {
return createEnvironment();
}
const environment = new Environment({
network,
store,
isServer: typeof window === "undefined",
});

responseCacheByEnvironment.set(environment, cache);

return environment;
}

const responseCacheByEnvironment = new WeakMap<
Environment,
QueryResponseCache
>();

export function getCacheByEnvironment(environment: Environment) {
return responseCacheByEnvironment.get(environment);
}
15 changes: 10 additions & 5 deletions issue-tracker-next-v13/src/relay/useSerializablePreloadedQuery.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@

import { useMemo } from "react";
import { PreloadedQuery, PreloadFetchPolicy } from "react-relay";
import { ConcreteRequest, IEnvironment, OperationType } from "relay-runtime";
import { responseCache } from "./environment";
import { ConcreteRequest, Environment, OperationType } from "relay-runtime";
import { getCacheByEnvironment } from "./environment";
import { SerializablePreloadedQuery } from "./loadSerializableQuery";

// This hook convert serializable preloaded query
Expand All @@ -17,12 +17,12 @@ export default function useSerializablePreloadedQuery<
TRequest extends ConcreteRequest,
TQuery extends OperationType
>(
environment: IEnvironment,
environment: Environment,
preloadQuery: SerializablePreloadedQuery<TRequest, TQuery>,
fetchPolicy: PreloadFetchPolicy = "store-or-network"
): PreloadedQuery<TQuery> {
useMemo(() => {
writePreloadedQueryToCache(preloadQuery);
writePreloadedQueryToCache(preloadQuery, environment);
}, [preloadQuery]);

return {
Expand All @@ -42,9 +42,14 @@ export default function useSerializablePreloadedQuery<
function writePreloadedQueryToCache<
TRequest extends ConcreteRequest,
TQuery extends OperationType
>(preloadedQueryObject: SerializablePreloadedQuery<TRequest, TQuery>) {
>(
preloadedQueryObject: SerializablePreloadedQuery<TRequest, TQuery>,
environment: Environment
) {
const cacheKey =
preloadedQueryObject.params.id ?? preloadedQueryObject.params.cacheID;
const responseCache = getCacheByEnvironment(environment);

responseCache?.set(
cacheKey,
preloadedQueryObject.variables,
Expand Down