# Add a Query parameter to each backed call using apolloclient and useQuery hook

**URL:** <https://community.apollographql.com/t/add-a-query-parameter-to-each-backed-call-using-apolloclient-and-usequery-hook/6001>\
**Category:** Client SDKs\
**Tags:** client, web\
**Created:** [March 23, 2023, 8:53pm UTC](https://community.apollographql.com/t/add-a-query-parameter-to-each-backed-call-using-apolloclient-and-usequery-hook/6001 "2023-03-23T20:53:34Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![hsanvi](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/hsanvi/32/4033_2.png) [@hsanvi](https://community.apollographql.com/u/hsanvi)\
**Post date:** [March 23, 2023, 8:53pm UTC](https://community.apollographql.com/t/add-a-query-parameter-to-each-backed-call-using-apolloclient-and-usequery-hook/6001/1 "2023-03-23T20:53:34Z")

</div>

Trying to add a new traceId as query parameter to uri in apolloClient.

```auto

const queryParameter = "?traceId=" + uuid() 
function getClient() {
  
  const client : any = new ApolloClient({
  uri: getAPIEndpoint()?.concat(queryParameter) ,
  cache: new InMemoryCache(),
  credentials: 'include'
});
return client
}

ReactDOM.render(
  <React.StrictMode>
    <ErrorBoundary>
      <ThemeProvider theme={mdTheme}>
        <ApolloProvider client={getClient()}>
          <Provider store={store}>
            <Router>
              <App />
            </Router>
          </Provider>
        </ApolloProvider>
      </ThemeProvider>
    </ErrorBoundary>
  </React.StrictMode>,
  document.getElementById('root')
);

```

when useQuery or useLazy Query hook is called we want apolloClient to add a new traceId to each graphql backend call. But we see that same traceId is passed in graphql calls

how to add a traceId or key-value as query parameter to apollo client

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [March 23, 2023, 9:04pm UTC](https://community.apollographql.com/t/add-a-query-parameter-to-each-backed-call-using-apolloclient-and-usequery-hook/6001/2 "2023-03-23T21:04:48Z")

</div>

That is because your

```js
const queryParameter = "?traceId=" + uuid();

```

line only executes once, and you also only create your ApolloClient instance only once. You are in the wrong place to do this here.

Something like this would happen in a [Link](https://www.apollographql.com/docs/react/api/link/apollo-link-context/#overview):

```js
const traceIdLink = setContext(() => {
  const queryParameter = "?traceId=" + uuid();
  return {
    uri: getAPIEndpoint()?.concat(queryParameter),
  };
});

```

And then you’d add that link:

```js
new ApolloClient({
  cache: new InMemoryCache(),
  credentials: "include",
  link: from([traceIdLink, new HttpLink({ uri: getAPIEndpoint() })]),
});

```

Another variant for this is shown [here in the docs](https://www.apollographql.com/docs/react/api/link/apollo-link-http/#dynamic-uri)

---

<div class="post-metadata">

**Author:** ![hsanvi](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/hsanvi/32/4033_2.png) [@hsanvi](https://community.apollographql.com/u/hsanvi)\
**Post date:** [March 24, 2023, 4:36am UTC](https://community.apollographql.com/t/add-a-query-parameter-to-each-backed-call-using-apolloclient-and-usequery-hook/6001/3 "2023-03-24T04:36:40Z")

</div>

> [@lenz](#):
>
> `from([traceIdLink, new HttpLink({ uri: getAPIEndpoint() })]),`

Thanks for your response Lenz  
i tried your suggestions and I still see same traceId value for all my Graphql calls. These calls are made from child component using hooks useQuery, useLazyQuery. Is there a way to pass link or queryParameter with useQuery and useLazyQuery

```auto
  const { loading, error, data } = useQuery(GetControlsMetaDataDashboard());
useEffect(() => {
    if (!loading) {
      const result = data?.ControlsMetaData;

      if (result && result.length > 0) {
        if (mock) {
          const mockData = [
            ...result,
            mock,
          ]
          setMetaData(mockData);
        } 
      }
    }},[loading, error, data] )

```

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [March 24, 2023, 9:28am UTC](https://community.apollographql.com/t/add-a-query-parameter-to-each-backed-call-using-apolloclient-and-usequery-hook/6001/4 "2023-03-24T09:28:15Z")

</div>

Generally, that link should create a new uuid on every new request, it doesn’t matter how you make your query.

Have you also tried the other variant that I have linked to?

---

<div class="post-metadata">

**Author:** ![hsanvi](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/hsanvi/32/4033_2.png) [@hsanvi](https://community.apollographql.com/u/hsanvi)\
**Post date:** [March 24, 2023, 6:09pm UTC](https://community.apollographql.com/t/add-a-query-parameter-to-each-backed-call-using-apolloclient-and-usequery-hook/6001/5 "2023-03-24T18:09:05Z")

</div>

yes , I have tried setContext with and without setTimeout wrapped around a promise. traceId remains the same for all the graphQl calls  
One other option is adding a second parameter “client” to useLazyQuery which contains a new apolloClient object with a traceId(as shown below). When the backend call is made apolloclient still has the old traceId and is not appended with new one

```auto
type or paste c const traceIdLink = setContext(
    request =>
      new Promise((success, fail) => {
        const queryParameter = "?traceId=" + uuid();
        // do some async lookup here
        setTimeout(() => {
          success({ uri: getAPIEndpoint()?.concat(queryParameter) });
        }, 10);
      })
  );

  const client : any = new ApolloClient({
    link: from([traceIdLink, new HttpLink({ uri: getAPIEndpoint() })]),
    cache: new InMemoryCache(),
    credentials: 'include'
  });
  
  const [fetchEncryptionAtRestAgg, { loading, error, data }] = useLazyQuery(apiCallMethodsControl[metaData.title](), client);ode here

```

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [March 24, 2023, 7:13pm UTC](https://community.apollographql.com/t/add-a-query-parameter-to-each-backed-call-using-apolloclient-and-usequery-hook/6001/6 "2023-03-24T19:13:58Z")

</div>

The other solution I linked to doesn’t have anything to do with `setContext` at all, I think you might have missed that:

```js
const customFetch = (uri, options) => {
  return fetch(`${getAPIEndpoint()}?traceId=${uuid()}`, options);
};

const link = new HttpLink({ fetch: customFetch });

```

---

<div class="post-metadata">

**Author:** ![Justin\_Gonzalez](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/justin_gonzalez/32/5359_2.png) [@Justin\_Gonzalez](https://community.apollographql.com/u/Justin_Gonzalez)\
**Post date:** [February 6, 2025, 8:49pm UTC](https://community.apollographql.com/t/add-a-query-parameter-to-each-backed-call-using-apolloclient-and-usequery-hook/6001/7 "2025-02-06T20:49:15Z")

</div>