“Error syncing atom “testQuery__{}” with GraphQL: Failed to parse URL from /graphql undefined” in Next.js + GraphQL + Relay + Recoil environment

Although I had to rename the variables and properties, below Next.js + GraphQL + Relay code works fine in my Next.js + Relay environment:

const testsQuery = graphql`
  query TestsQuery {
    tests {
      collection {
        foo
        bar
        baz
      }
    }
  }
`;


const Child => props => {
  const { foo } = usePreloadedQuery(testsQuery , props.testsQueryRef);
  return <div> { foo } </div>;
}

const Layout = props => {

  const [testsQueryRef, testsLoadQuery] = useQueryLoader(testsQuery);

  return(
     <RelayEnvironmentProvider environment={testEnvironment}>
        <React.Suspense>
          {
            isNeitherUndefinedNorNull(testsQueryRef)
            <Child testsQueryRef={ testsQueryRef} />
          }
        </React.Suspense>
     </RelayEnvironmentProvider>
  )

}

Now I am going to replace testsQuery variable with same GraphQL query but using Recoil:

const testsQuery1 = graphQLSelector({
  key: 'testQuery',
  environment: accountEnvironment,
  query: graphql`
  query TestsQuery {
    tests {
      collection {
        foo
        bar
        baz
      }
    }
  }
  `
  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment --
   * The bug of Recoil + Relay. `{ "eagerEsModules": true}` could not work.
   * https://stackoverflow.com/q/74146990
   * https://github.com/facebookexperimental/Recoil/issues/1998#issuecomment-1275625029
   * */
  // @ts-ignore
  .default,
  variables: {}
});

Everything will work until use the variable testsQuery1.
If use the variable testsQuery1 with useRecoilValue:

const Layout = props => {

  const [testsQueryRef, testsLoadQuery] = useQueryLoader(testsQuery);

  const data = useRecoilValue(testsQuery1)
 

  return(
     <RelayEnvironmentProvider environment={testEnvironment}>
        <React.Suspense>
          {
            isNeitherUndefinedNorNull(testsQueryRef)
            <Child testsQueryRef={ testsQueryRef} />
          }
        </React.Suspense>
     </RelayEnvironmentProvider>
  )

}

the data even will be retrieved until not reload the page.
Once reload the page, the Relay will fail with error:

2023-08-31 11:28:58 Error syncing atom "testQuery__{}" with GraphQL: Failed to parse URL from /graphql undefined
2023-08-31 11:28:58 error - unhandledRejection: TypeError: Failed to parse URL from /graphql
2023-08-31 11:28:58     at Object.fetch (node:internal/deps/undici/undici:14062:11)
2023-08-31 11:28:58     at async fetchGraphQL (webpack-internal:///./src/lib/fetchGraphQL.ts:13:22) {
2023-08-31 11:28:58   [cause]: TypeError [ERR_INVALID_URL]: Invalid URL
2023-08-31 11:28:58       at new NodeError (node:internal/errors:400:5)
2023-08-31 11:28:58       at URL.onParseError (node:internal/url:565:9)
2023-08-31 11:28:58       at new URL (node:internal/url:645:5)
2023-08-31 11:28:58       at new Request (node:internal/deps/undici/undici:6914:25)
2023-08-31 11:28:58       at fetch2 (node:internal/deps/undici/undici:13228:25)
2023-08-31 11:28:58       at Object.fetch (node:internal/deps/undici/undici:14060:18)
2023-08-31 11:28:58       at fetch (node:internal/process/pre_execution:241:25)
2023-08-31 11:28:58       at eval (webpack-internal:///./src/lib/fetchGraphQL.ts:43:20)
2023-08-31 11:28:58       at fetchGraphQL (webpack-internal:///./src/lib/fetchGraphQL.ts:54:7)
2023-08-31 11:28:58       at fetchRelay (webpack-internal:///./src/environments/TestEnvironment.ts:17:73) {
2023-08-31 11:28:58     input: '/graphql',
2023-08-31 11:28:58     code: 'ERR_INVALID_URL'
2023-08-31 11:28:58   }
2023-08-31 11:28:58 }
2023-08-31 11:28:58 error - unhandledRejection: TypeError: Failed to parse URL from /graphql
2023-08-31 11:28:58     at Object.fetch (node:internal/deps/undici/undici:14062:11)
2023-08-31 11:28:58     at async fetchGraphQL (webpack-internal:///./src/lib/fetchGraphQL.ts:13:22) {
2023-08-31 11:28:58   [cause]: TypeError [ERR_INVALID_URL]: Invalid URL
2023-08-31 11:28:58       at new NodeError (node:internal/errors:400:5)
2023-08-31 11:28:58       at URL.onParseError (node:internal/url:565:9)
2023-08-31 11:28:58       at new URL (node:internal/url:645:5)
2023-08-31 11:28:58       at new Request (node:internal/deps/undici/undici:6914:25)
2023-08-31 11:28:58       at fetch2 (node:internal/deps/undici/undici:13228:25)
2023-08-31 11:28:58       at Object.fetch (node:internal/deps/undici/undici:14060:18)
2023-08-31 11:28:58       at fetch (node:internal/process/pre_execution:241:25)
2023-08-31 11:28:58       at eval (webpack-internal:///./src/lib/fetchGraphQL.ts:43:20)
2023-08-31 11:28:58       at fetchGraphQL (webpack-internal:///./src/lib/fetchGraphQL.ts:54:7)
2023-08-31 11:28:58       at fetchRelay (webpack-internal:///./src/environments/TestEnvironment.ts:17:73) {
2023-08-31 11:28:58     input: '/graphql',
2023-08-31 11:28:58     code: 'ERR_INVALID_URL'
2023-08-31 11:28:58   }
2023-08-31 11:28:58 }

Not being the developer of GrapthQL or Relay, completely don’t understand what happen.