Bug: Conditional values not working with applyRequestContext

[humet]

I have been trying to get Faust working with a Wordpress API that is using basic auth password protection. I am using applyRequestContext to add the required authentication headers to each request.

Everything works fine until I need to fetch data on the client-side. When that happens I start to get CORS errors with the request.

I have forced the title in a minimal repo to be conditionally fetched which is causing that part to be fetched on the client-side. The same error occurs when we are trying to do 'infinite' post loading etc.

Applicable Versions

• @faustjs/core version: 0.15.4
• @faustjs/react version:
• @faustjs/next version: 0.15.5
• WordPress version: 5.9.2

Steps To Reproduce

1. Download and install https://github.com/Dexerto/basic-auth-faust-example
2. Change NEXT_PUBLIC_WORDPRESS_URL in .env.local to https://blankdexsitstg.wpengine.com
3. Load homepage
4. Look at Network Requests

Link to code example: https://github.com/Dexerto/basic-auth-faust-example/blob/6f43604d2ba1e99236dd1903aaaa656eb042c0c7/src/pages/index.tsx#L22

The current behavior

The expected behavior

Fetch completes successfully.

[theodesp]

@humet Thank you for reporting this issue.I've created a ticket in our internal system to look into this problem. We will post any updates in this thread.

[theodesp]

@humet I was able to reproduce your issue with the CORS request failure. I recon is a typical case where the Access-Control-Allow-Origin is missing from the server response hence the issue with CSR. We don't do anything wrong in Faust.js in regards to sending the payload to the server however.

Here is what i've discovered:

1. I cloned the example repo and followed the Steps To Reproduce you mentioned
2. I noticed the CORS Errors in the console

This tells me that this endpoint does not respond with the correct CORS headers back.

3. I changed the NEXT_PUBLIC_WORDPRESS_URL to run behind an proxy server: NEXT_PUBLIC_WORDPRESS_URL=https://cors-anywhere.herokuapp.com/https://blankdexsitstg.wpengine.com

4. I was able to query the data with CSR without issues:

Not really sure why this is happening as when I inspect the Access-Control-Headers for your site I get the correct ones allowed for CORS requests:

❯ curl -i -X OPTIONS 'https://blankdexsitstg.wpengine.com/graphql' -H 'Authorization: Basic YmxhbmtkZXhzaXRzdGc6OTMzODVlNjY='
HTTP/2 200
server: nginx
date: Mon, 09 May 2022 10:20:01 GMT
content-type: application/json ; charset=UTF-8
content-length: 0
access-control-allow-origin: *
access-control-allow-headers: Authorization, Content-Type
access-control-max-age: 600
x-robots-tag: noindex
x-content-type-options: nosniff
x-powered-by: WP Engine

I suspect you may have to add another header when Using HTTP Auth as mentioned in this article:

https://www.sjoerdlangkemper.nl/2018/09/12/authorization-header-and-cors/

• On the client, specify that you want to include credentials. Set Request.credentials to include.
• On the server, respond with Access-Control-Allow-Credentials: true. This lets the client know that authenticated requests are permitted.
• On the server, respond with Access-Control-Allow-Origin header, containing the origin that performs the request. You must specify a URL, a wildcard won’t work with authenticated requests.

You may want to try experimenting with the following CORS plugin:

https://github.com/funkhaus/wp-graphql-cors

Let me know what was the outcome of this.

[theodesp]

@humet were you able to resolve your issue?

[theodesp]

Will close this issue due to lack of inactivity. You can create a new issue with a more reproducible example.