I'm making a React website with a database that uses GraphQL queries. Everything works correctly until I need to make a query from /profile/:username. Everytime I make a query from that URL it tries to fetch from /profile/graphql, which doesn't have any database attached to it.
I need every fetch request to redirect to /graphql no matter where I am in the website.
Here is how I have my routes set up
import React from 'react';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import Authorization from './pages/Authorization';
import Home from './pages/Home';
import Login from './pages/Login';
import Profile from './pages/Profile';
// Apollo Imports
import { ApolloProvider, ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
const httpLink = createHttpLink({
uri: 'graphql'
});
const authLink = setContext((_, { headers }) => {
const token = localStorage.getItem('id_token');
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : '',
}
}
});
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache()
});
function App() {
return (
<ApolloProvider client={client}>
<Router>
<Routes>
<Route path="/login" element={<Login />} />
<Route element={<Authorization />}>
<Route path='/' element={<Home/>} />
<Route path='/profile'>
<Route path=':username' element={<Profile />} />
<Route path='' element={<Profile />} />
</Route>
</Route>
</Routes>
</Router>
</ApolloProvider>
);
}
export default App;
When I am visiting just /profile, everything works great, it requests to http://localhost:3000/graphql.
When I visit /profile:username its a different story, it requests to http://localhost:3000/profile/graphql
I have been searching around the internet for a couple hours, can't find anybody having the same issue as me.