Dear Community,
I am using Angular with Apollo Graphql and uses PrismicLink from apollo-link-prismic. Currently the API call looks like below and works fine
const resultt = await this.apollo.query<any>({
query: GET_Something,
variables: {
ids,
}
}).toPromise();
of(resultt)
.pipe(...)
Now there is a limitation of 20 documents/nodes per query. To overcome this limit, I am chunking the id's . This works fine when used in a backend (node) environment. But when used from the frontend, it throws CORS error. The code change is as below
const ids = [<more_than_20_ids>];
const chunks = createChunks(ids, 20);
for (const chunk of chunks) {
const resultt = await this.apollo.query<any>({
query: GET_Something,
variables: {
chunk,
}
}).toPromise();
}
Just the change to this and I can see the below error in console. In fact adding a for loop for two different sets of id's causes the cors issue. So trying something like below can also produce the same error
const ids = [[
....
], [
....
]];
for (const id of ids) {
Access to fetch at '....' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-
Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your
needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Please note: I don't need pagination and things. I just want to get all items for all the provided ids.
What is the issue and how to resolve it?