Problem with client side running using `yarn`

[dim1tri]

Hi, could anybody help me with the error I'm facing with the react app (hasura side works ok):

➜ yarn dev
yarn run v1.22.10
$ next dev
Loaded env from /home/data-dictionary/react-app/.env
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using <tr>. See https://reactjs.org/link/warning-keys for more information.
    at th
    at Table (webpack-internal:///./components/table.tsx:23:51)
    at div
    at DataModels (webpack-internal:///./pages/index.tsx:59:61)
    at div
    at Home
    at main
    at div
    at div
    at Layout (webpack-internal:///./components/layout.tsx:188:3)
    at StoreProvider (/home/data-dictionary/react-app/node_modules/easy-peasy/dist/index.cjs.js:1662:23)
    at MyApp (webpack-internal:///./pages/_app.tsx:29:3)
    at AppContainer (/home/data-dictionary/react-app/node_modules/next/dist/next-server/server/render.js:25:748)
/home/data-dictionary/react-app/node_modules/node-fetch/lib/index.js:1305
                throw new TypeError('Only absolute URLs are supported');
                      ^

TypeError: Only absolute URLs are supported
    at getNodeRequestOptions (/home/data-dictionary/react-app/node_modules/node-fetch/lib/index.js:1305:9)
    at /home/data-dictionary/react-app/node_modules/node-fetch/lib/index.js:1410:19
    at new Promise (<anonymous>)
    at Function.fetch [as default] (/home/data-dictionary/react-app/node_modules/node-fetch/lib/index.js:1407:9)
    at /home/data-dictionary/react-app/node_modules/@genql/runtime/dist/fetcher.js:34:74
    at step (/home/data-dictionary/react-app/node_modules/@genql/runtime/node_modules/tslib/tslib.js:140:27)
    at Object.next (/home/data-dictionary/react-app/node_modules/@genql/runtime/node_modules/tslib/tslib.js:121:57)
    at /home/data-dictionary/react-app/node_modules/@genql/runtime/node_modules/tslib/tslib.js:114:75
    at new Promise (<anonymous>)
    at Object.__awaiter (/home/data-dictionary/react-app/node_modules/@genql/runtime/node_modules/tslib/tslib.js:110:16)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

My environment:
OS: Manjaro Linux 20.2
Docker version 19.03.13-ce
docker-compose version 1.27.4
yarn 1.22.10

Thanks ;)

[GavinRay97]

Hey Dimitri,

That error you're seeing is because the URL given to the GraphQL client in the React app for querying the API is relative. You can see it here:

data-dictionary/react-app/utils/graphqlClient.ts

Lines 3 to 8 in 9716bab

	export const client = createClient({
	url: "/api/graphql",
	headers: {
	"Some-Identifier-Here-Later": "some-value"
	}
	})

It shouldn't break anything though -- all of the queries should still succeed. Is the client not able to run queries for you?

It wants a full URL, which is more difficult to manage between environments than just using a relative URL to whatever the current host is. If anyone can PR a dynamic hostname resolution method that works for Next.js to fix this error (can't use window because half the time the code will run on Node) that would be great.

For now I just left the error/warning as it wasn't seeming to actually fail/cause any issues for me.