GraphQL query not working while URL has a subdirectory

Viewed 8

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.

0 Answers
Related