Relay request for `MySheetsQuery` failed - reactjs

Question

I have MySheets where I need to show some info. This info is fetched from a graphql endpoint. The problem is that the component is loading some time and then the following error occurs:
Relay request for MySheetsQuery failed by the following reasons: 1.
System cannot complete request. Something went wrong trying to
retrieve My Asset Allocations for {(R1) RSA 11% 2012} from external
sources sheets(first: $count, after: $cursor, q: $search, id^^^.
The status code is 200 OK. ,
but the response I am getting in Network is:
{"errors":[{"message":"System cannot complete request. Something went
wrong trying to retrieve My Asset Allocations for {(R1) RSA 11% 2012}
from external
sources","locations":[{"line":25,"column":3}],"path":["viewer","sheets"],"extensions":{"type":"BUSINESS_CONSTRAINT_VIOLATION","classification":"DataFetchingException"}}],"data":null}
When I copy the request payload from the Inspect -> Network and the values I pass and paste them in Postman, I get the response successfully. Why is relay causing an error?
I am getting this warnings from relay in console.
const MySheets: React.FC<IProps> = ({
viewer,
id,
name,
}: IProps) => {
const [localSearch, setLocalSearch] = React.useState<string>();
const [search, setSearch] = React.useState<string>();
return (
<>
<div>
<HeaderActionBar title={"Sheets"} />
<Paper elevation={6}>
<Box display={"flex"} margin={2.5}>
<div>
<div>
<SearchIcon fontSize={"medium"} color={"action"} />
</div>
<InputBase
onChange={(event) => {
setLocalSearch(event.target.value);
}}
placeholder={"Search..."}
onKeyDown={(e) => {
if (e.keyCode === 13) {
setSearch(localSearch);
}
}}
inputProps={{ "aria-label": "search" }}
/>
</div>
<Button
variant={"contained"}
size={"small"}
color={"secondary"}
startIcon={
<SearchIcon fontSize={"large"} color={"inherit"} />
}
onClick={() => {
setSearch(localSearch);
}}
>
Search
</Button>
</Box>
<Divider/>
<Suspense fallback={<TableSkelton />}>
<SheetsTable
viewer={viewer}
search={search}
id={id}
/>
</Suspense>
</Paper>
</div>
</>
);
};
const query = graphql`
query MySheetsQuery(
$count: Int!
$cursor: String
$search: String
$clientId: ID!
$supplierIds: [ID!]
$supplierProductIds: [ID!]
$instrumentName: String
$sort: SheetSort
) {
viewer {
...SheetsTable_sheets
}
node(id: $clientId) {
... on Client {
id
displayName
}
}
}
`;
export function SheetsWrapper() {
const { id } = useParams();
const { data, isLoading, error } = useQuery<MySheetsQuery>(query, {
count: 10,
search: null,
id: id ?? null,
});
if (isLoading) {
return <EnhancedCircularProgress />;
}
if (error) {
return <><div>{error.message}</div>
<div>{error.stack}</div></>;
}
if (!data) {
return <EnhancedCircularProgress />;
}
return (
<Suspense fallback={<EnhancedCircularProgress />}>
<MySheets
viewer={data?.viewer}
clientId={id}
clientName={data.node?.displayName ?? ""}
/>
</Suspense>
);
}
interface IProps {
viewer: SheetsTable_sheets$key;
clientId: string;
clientName: string;
}
export default SheetsWrapper;
This is my RelayEnvironment:
type HandleLogoutFn = () => void;
type GetAuthTokenFn = () => string;
function createNetworkLayer(
handleLogout: HandleLogoutFn,
getAuthTokenFn: GetAuthTokenFn
) {
return new RelayNetworkLayer(
[
cacheMiddleware({
size: 100, // max 100 requests
ttl: 900000, // 15 minutes
}),
urlMiddleware({
url: () => `${ConfigService.serverUri}/graphql`,
}),
retryMiddleware({
fetchTimeout: 5000,
retryDelays: [30000, 60000],
forceRetry: (cb, delay) => {
window.forceRelayRetry = cb;
console.log(
`call \`forceRelayRetry()\` for immediately retry! Or wait ${delay} ms.`
);
},
statusCodes: [500, 503, 504],
}),
authMiddleware({
token: getAuthTokenFn,
}),
(next) => async (req) => {
req.fetchOpts.headers.Accept = "application/json";
req.fetchOpts.headers["Content-Type"] = "application/json";
// req.fetchOpts.headers['X-Request-ID'] = uuid.v4(); // add `X-Request-ID` to request headers
req.fetchOpts.credentials = "same-origin"; // allow to send cookies (sending credentials to same domains)
try {
return await next(req);
} catch (ex) {
if (ex.res && ex.res.status === 401) {
handleLogout();
}
throw ex;
}
},
],
{}
);
}
export function createRelayEnv(
handleLogout: HandleLogoutFn,
getAuthTokenFn: GetAuthTokenFn
) {
const network = createNetworkLayer(handleLogout, getAuthTokenFn);
return new Environment({
network: network,
store: new Store(new RecordSource()),
});
}