Duplicate API calls with @urql/next and request policy "cache-and-network"

[gottfired]

I'm using @urql/next: "^1.1.1" and urql: "^4.0.6".

My client setup for SSR is the following

export const buildBrowserUrqlClient = (): [Client, SSRExchange] => {
    const ssr = ssrExchange({
        isClient: typeof window !== "undefined",
    });
    const token = process.env.NEXT_PUBLIC_GRAPH_QL_TOKEN;
    let headers = {
        authorization: `Bearer ${token}`,
    };

    const client = createClient({
        url: process.env.NEXT_PUBLIC_GRAPH_QL_ENDPOINT!,
        exchanges: [
            cacheExchange,
            ssr,
            fetchExchange,
        ],
        suspense: true,

        // cache-and-network leads to duplicate API calls
        requestPolicy: "cache-and-network",

        fetchOptions: () => {
            return {
                headers,
            };
        },
    });

    return [client, ssr];
};

export const GraphQlProvider = (props: { children: React.ReactNode }) => {
    const [client, ssr] = useMemo(buildBrowserUrqlClient, []);

    return (
        <UrqlProvider client={client} ssr={ssr}>
            {props.children}
        </UrqlProvider>
    );
};

Now when I am doing a query, every fetch is done twice. Once from the component file (e.g. projects.tsx) where the query is done using

const [{ data, fetching, stale, error }] = useQuery({
        query: graphql(projectsQuery),
        variables: { site: locale, projectCategory: filters.filterCategories },
    });

and once from urql-core-chunk.mjs.

When I use request policy cache-first only one API call from projects.tsxshows up in the network inspector. As a sidenote, if I switch to request policy network-only then I get an infinite loop of API calls.

[belmeopmenieuwesim]

This is currently broken still as of april 2025