Gatsby: Link precompiling query params at build time?

[Vpr99]

Hey folks!

I'm trying to get a feature working where a query param from the URL is passed down to a Link. I'm grabbing the location prop from my page and passing it down to the component correctly. (this all works fine) When I try and append that query param to the Link, it works fine in development mode, but when I run gatsby build and gatsby serve, the query param vanishes. Here's an example of what I'm doing:

const { myQueryParam } = parse((location || {}).search);
const params = stringify({ myQueryParam });
const q = params ? `?${params}` : "";

return (
 <Link to={`https://www.google.com?${q}`}>My Link</Link>
);

If my current url is: https://localhost:8000?myQueryParam=abc1234, then I'm expecting the Link to navigate to https://www.google.com?myQueryParam=abc1234. Again, this works properly in gatsby develop, but not during the build. I (very naïvely) suspect that somehow the Link is being compiled to a normal anchor tag at build time and since the query param is empty at that point, nothing happens.

I can temporarily work around this by making a window.location call in an onClick function on the link, but that seems super hacky and not something I want to introduce into the codebase long term.

Does anybody have recommendations on how I can make this work?

Gatsby version: 2.0.42 (latest)

[jonniebigodes]

I was unable to reproduce your issue.
But before that, one thing, you have a problem with your code namely in here:

const q = params ? `?${params}` : "";

This will append a second ? to your link url.
Now onto the issue at hand.
The actual code i used was this.

The page code:

import React from 'react'
import { Link} from 'gatsby'
import TestqueryParams from '../components/TestqueryParams';
import Layout from '../components/layout'

const SecondPage = ({location}) => (
  <Layout>
    <h1>Hi from the second page</h1>
    <p>Welcome to page 2</p>
    <TestqueryParams {...location}/>
    <Link to="/">Go back to the homepage</Link>
  </Layout>
)

export default SecondPage

The component with the code provided and a query parameter like so myQueryParam=abc1234

import React from 'react';
import { Link } from 'gatsby'
import { parse,stringify } from 'query-string';


const TestqueryParams=location=>{

    const { myQueryParam } = parse((location || {}).search);

    const params = stringify({ myQueryParam });
    const q = params ? `${params}` : "";
    return (
        <div>
            <h4>Hello from TestqueryParams</h4>
            <Link to={`https://www.google.com?${q}`}>My Link</Link>
        </div>
    )
}
export default TestqueryParams

tested with gatsby dev and it was getting the query param passed like you said.
With gatsby build and gatsby serve i got the same exact output. I got the parameter added to the link.
Deleted the .cache folder and public re issued build and serve, exact same output.

Also don't forget to adjust your code because the Link url will be localhost:9000/https://www.google.com?myQueryParam=whatever is recieved here

[Vpr99]

Thanks so much for taking the time to respond in such detail! This is so weird.

I ran through your example with the following setup (to try and make a proof of concept):

• New Gatsby Hello World (gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world)
• Copied your TestqueryParams component to /src/pages/index.js.
• Tested in Chrome, FF and Safari

Here are my results:

• All 3 browsers correctly show the query param when using gatsby develop
• After running gatsby build && gatsby serve:
  
  
  
  • The query param shows correctly when using Gatsby's Link component:
    
    <Link to={`https://www.google.com?${q}`}>My Link</Link>
  
  
  • The query param doesn't show correctly when using an Anchor tag:
    
    <a href={`https://www.google.com?${q}`}>My Link</a>
  
  

This would also explain my original issue, which I probably should have mentioned above. My Link is the same abstraction from the docs that switches out an anchor for the Link when it isn't prefixed by /.

So I guess in conclusion, I'm still encountering the issue, but only for anchor tags. Again, thanks for the super detailed write-up.

[jonniebigodes]

No need to thank...Here to help out others as much as they have helped me. I'm leaving the issue open and see if anyone more knowledgeable can provide you with a solution to the issue

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[Restuta]

I have faced the same issue today :(

[wokejacqueline]

Can this issue be re-opened? Running into the same problem described by @Vpr99,

"My Link is the same abstraction from the docs that switches out an anchor for the Link when it isn't prefixed by /."