We Keep Coding

Router search not capturing whats in URL

My URL currently looks as following.
http://localhost:3000/path/label?default=1111
I want to append additional query string values. Thus after appending, I am expecting it to appear as follows.
http://localhost:3000/path/label?name=name&age=100&default=ab07
Current logic works when I look at it in the browser URL.
I see this:
http://localhost:3000/path/label?name=name&age=100&default=ab07
But when I console print it:
console.log(`router: ${JSON.stringify(router.location.search)}`)
I end up printing following:
router: "?default=1111"
It should have printed:
router: "?name=name&age=100&default=ab07"
Thought maybe the router updates fine, just some delay in print.
But that is not the case.
Once I have amended the query params. I need to push it to another url with same params.
At this stage it is still wrongly only holding the initial query params and ignoring my new params. Why?
Expected to push to:
newPath/?name=name&age=100&default=ab07
Incorrectly pushing to:
newPath?default=ab07
This is how I am appending the query and search params.
export const add = (router, data) => {
const pathname = router.location.pathname;
let updatedQuery = {
...router.location.query,
};
if (hasValue) {
const details = {
name: 'name',
'age': '100'
};
updatedQuery = {
...updatedQuery,
...details,
};
}
router.replace({
pathname,
query: updatedQuery,
search: new URLSearchParams(updatedQuery),
});
}
This is how I am pushing it to another path while still wanting to retain the same query params.
// This function is in another file.
redirectToAnotherPage = (router, data) => {
// other logic
return `/newPath/${router.location.search}`;
}
This is how I am calling both above functions.
import { withRouter } from 'react-router';
const constructAndRedirect() {
// other logic
add(router, data)
router.push(redirectToAnotherPage(router, data));
}

How to properly use context in tRPC?

Let's say I have a very basic API with two sets of endpoints. One set queries and mutates properties about a User, which requires a username parameter, and one set queries and mutates properties about a Post, which requires a post ID. (Let's ignore authentication for simplicity.) I don't currently see a good way to implement this in a DRY way.
What makes the most sense to me is to have a separate Context for each set of routes, like this:
// post.ts
export async function createContext(
opts?: trpcExpress.CreateExpressContextOptions
) {
// pass through post id, throw if not present
}
type Context = trpc.inferAsyncReturnType<typeof createContext>;
const router = trpc
.router()
.query("get", {
resolve(req) {
// get post from database
return post;
},
});
// similar thing in user.ts
// server.ts
const trpcRouter = trpc
.router()
.merge("post.", postRouter)
.merge("user.", userRouter);
app.use(
"/trpc",
trpcExpress.createExpressMiddleware({
router: trpcRouter,
createContext,
})
);
This complains about context, and I can't find anything in the tRPC docs about passing a separate context to each router when merging. Middleware doesn't seem to solve the problem either - while I can fetch the post/user in a middleware and pass it on, I don't see any way to require a certain type of input in a middleware. I would have to throw { input: z.string() } or { input: z.number() } on every query/mutation, which of course isn't ideal.
The docs and examples seem pretty lacking for this (presumably common) use case, so what's the best way forward here?

This functionality has been added in (unreleased as of writing) v10. https://trpc.io/docs/v10/procedures#multiple-input-parsers
const roomProcedure = t.procedure.input(
z.object({
roomId: z.string(),
}),
);
const appRouter = t.router({
sendMessage: roomProcedure
.input(
z.object({
text: z.string(),
}),
)
.mutation(({ input }) => {
// input: { roomId: string; text: string }
}),
});

NextJS - Appending a query param to a dynamic route

In my NextJS app, I have a language selector that's visible on every page. When I select a new language, I just want to replace the current URL by appending a query param lang=en to it.
Here's the function that replaces the URL:
const changeLanguage = (lang: LanguageID) => {
replace({
pathname,
query: { ...query, lang },
});
};
In this example, replace, query and pathname are coming from the next router.
Now, everything works for static routes, but I'm unable to make it work for dynamic routes. For example, I have the following folder structure:
pages
|_customers
|__index.tsx
|__[customerId].tsx
If I'm on http://localhost/customers and I change my language to English, the URL changes to http://localhost/customers?lang=en which is what I want. However, if I'm on http://localhost/customer/1 and I change my language to English, the URL changes to http://localhost/customers/[customerId]?customerId=1&lang=en, instead of the URL I'm expecting http://localhost/customers/1?lang=en.
Now, I know that I could use asPath on the router, and reconstruct the query string object by appending lang to it, but I feel that it's something that should be build into Next. Also, I know it could be easily done with vanilla JS, but it's not the point here.
Am I missing something? Is there an easier way to append query params to a dynamic route without doing a server-side re-rendering?
Thanks

Just add more param to current router then push itself
const router = useRouter();
router.query.NEWPARAMS = "VALUE"
router.push(router)

The solution which doesn't need to send the whole previous route, as replace just replaces what we need to replace, so query params:
const router = useRouter();
router.replace({
query: { ...router.query, key: value },
});

If we want to have this as a link - use it like so:
// ...
const { query } = useRouter();
// ...
<Link
href={{
pathname: router.pathname,
query: { ...query, lang },
}}
passHref
shallow
replace
></Link>

I tried adding my param to the route query and pushing the router itself, as mentioned here, it works, but I got a lot of warnings:
So, I then pushed to / and passed my query params as following:
const router = useRouter();
router.push({ href: '/', query: { myQueryParam: value } });
I hope that works for you too.

I ended up using the solution that I wanted to avoid in the first place, which was to play with the asPath value. Atleast, there's no server-side re-rendering being done since the path is the same.
Here's my updated changeLanguage function (stringifyUrl is coming from the query-string package)
const changeLanguage = (lang: LanguageID) => {
const newPathname = stringifyUrl({ url: pathname, query: { ...query, lang } });
const newAsPath = stringifyUrl({ url: asPath, query: { lang } });
replace(newPathname, newAsPath);
};

If anyone is still looking the answer ,for Next,js ^11.1.2.I hope this helps you out.Use
const router = useRouter();
router.push({ pathname: "/search", query: { key: key } });

An alternative approach when you have dynamic routing in Next.js, and want to do a shallow adjustment of the route to reflect updated query params, is to try:
const router = useRouter()
const url = {
pathname: router.pathname,
query: { ...router.query, page: 2 }
}
router.push(url, undefined, { shallow: true })
This will retreive the current path (router.pathname) and query (router.query) details, and merge them in along with your new page query param. If your forget to merge in the existing query params you might see an error like:
The provided href value is missing query values to be interpolated
properly

In latest version, Next 13, some of the functionality moved to other hooks, which query and path are some of them. You can use useSearchParams to get query and usePathname instead of pathname. By the time I am writing this answer, it does not have a stable version and you can find the beta documents here:
https://beta.nextjs.org/docs/api-reference/use-router

let queryParams;
if (typeof window !== "undefined") {
// The search property returns the querystring part of a URL, including the question mark (?).
queryParams = new URLSearchParams(window.location.search);
// quaeryParams object has nice methods
// console.log("window.location.search", queryParams);
// console.log("query get", queryParams.get("location"));
}
inside changeLanguage,
const changeLanguage = (lang: LanguageID) => {
if (queryParams.has("lang")) {
queryParams.set("lang", lang);
} else {
// otherwise append
queryParams.append("lang", lang);
}
router.replace({
search: queryParams.toString(),
});
};

Force to use window.location.href in vue-router hash mode

I'm using vue-router 3.0.1, and the mode is hash.
The current url is:
/#/?type=1
I tried to use window.location.href for the same path, but different query parameter like this.
window.location.href = '/#/?type=2';
But the url of the browser changes, but nothing else happens.
At the first place, I am trying this, because router.push didn't re-render the component.
The original window.location.href should give the different result, but vue-router looks like to override window.location.href.
How can I force to move to /#/?type=2, in this case?

You don't need to use window.location.href to make it work. The problem here is that the component is reused when you only update the query parameter and the component will not automatically re-render. One way to solve this issue is to watch the $route in your component. Here's an code example. You also can find the jsFiddle here https://jsfiddle.net/Fourzero/cbnom5sL/22/.
Html
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<!-- You can use router-link to trigger the url change or router.push in your code -- it doesn't matter. -->
<router-link to="/?type=2">type 2</router-link>
<router-link to="/?type=1">type 1</router-link>
<router-view></router-view>
</div>
JavaScript
const Bar = {
template: '<div>Type {{type}}</div>',
data () {
return {
type: ''
}
},
mounted () {
this.type = this.$route.query.type;
},
watch: {
$route(to, from) {
// Update the data type when the route changes.
this.type = to.query.type;
}
}
}
const router = new VueRouter({
mode: 'hash',
routes: [
{ path: '', component: Bar },
]
})
new Vue({
router,
el: '#app',
data: {
msg: 'Hello World'
}
})
For detailed explanation, you can refer the official doc https://router.vuejs.org/guide/essentials/dynamic-matching.html.

How can I add computed state to graph objects in React Apollo?

I really like the graphQL pattern of having components request their own data, but some data properties are expensive to compute and so I want to localize the logic (and code) to do so.
function CheaterList({ data: { PlayerList: players } }) {
return (
<ul>
{players && players.map(({ name, isCheater }) => (
<li key={name}>{name} seems to be a {isCheater ? 'cheater' : 'normal player'}</li>
))}
</ul>
);
}
export default graphql(gql`
query GetList {
PlayerList {
name,
isCheater
}
}
`)(CheaterList);
The schema looks like:
type Queries {
PlayerList: [Player]
}
type Player {
name: String,
kills: Integer,
deaths: Integer
}
And so I want to add the isCheater property to Player and have its code be:
function computeIsCheater(player: Player){
// This is a simplified version of what it actually is for the sake of the example
return player.deaths == 0 || (player.kills / player.deaths) > 20;
}
How would I do that?
Another way of phrasing this would be: how do I get the isCheater property to look as though it came from the backend? (However, if an optimistic update were applied the function should rerun on the new data)

Note: Local state management is now baked into apollo-client -- there's no need to add a separate link in order to make use of local resolvers and the #client directive. For an example of mixing local and remote fields, check out of the docs. Original answer follows.
As long as you're using Apollo 2.0, this should be possible by utilizing apollo-link-state as outlined in the docs.
Modify your client configuration to include apollo-link-state:
import { withClientState } from 'apollo-link-state';
const stateLink = withClientState({
cache, //same cache object you pass to the client constructor
resolvers: linkStateResolvers,
});
const client = new ApolloClient({
cache,
link: ApolloLink.from([stateLink, new HttpLink()]),
});
Define your client-only resolvers:
const linkStateResolvers = {
Player: {
isCheater: (player, args, ctx) => {
return player.deaths == 0 || (player.kills / player.deaths) > 20
}
}
}
Use the #client directive in your query
export default graphql(gql`
query GetList {
PlayerList {
name
kills
deaths
isCheater #client
}
}
`)(CheaterList);
However, it appears that combining local and remote fields in a single query is currently broken. There's an open issue here that you can track.