Use cookies in react-query #2606
Answered
by
TkDodo
elisalimli
asked this question in
General
-
|
Hi, i am trying using react-query in next js .But i am using cookies,so i need to put it in the headers. How can i do that ?My _app.tsx => import "../styles/globals.css";
import React from "react";
import { QueryClient, QueryClientProvider } from "react-query";
import { Hydrate } from "react-query/hydration";
import { ReactQueryDevtools } from "react-query/devtools";
// import tailwind css file in development for optimizing performance
if (process.env.NODE_ENV === "development") require("../styles/tailwind.css");
else if (process.env.NODE_ENV === "production") require("../styles/prod.css");
const MyApp = ({ Component, pageProps }) => {
const [queryClient] = React.useState(() => new QueryClient());
return (
<QueryClientProvider client={queryClient}>
<Hydrate state={pageProps.dehydratedState}>
<Head>
<meta
name="viewport"
content="width=device-width,initial-scale=1,user-scalable=no,user-scalable=0"
/>
</Head>
<Component {...pageProps} />
</Hydrate>
<ReactQueryDevtools />
</QueryClientProvider>
);
};
export default MyApp;When i was using Apollo,i can easily set the headers like this: import { NextPageContext } from "next";
import { isServer } from "./isServer";
import { withApollo as createWithApollo } from "next-apollo";
const createClient = (ctx: NextPageContext) => {
console.log("url", process.env.NEXT_PUBLIC_API_URL);
return new ApolloClient({
uri: process.env.NEXT_PUBLIC_API_URL,
credentials: "include",
headers: {
cookie: isServer ? ctx?.req?.headers.cookie : undefined,
},
cache: new InMemoryCache(),
});
};
export const withApollo = createWithApollo(createClient);Then i am able to make queries with headersimport { useMeQuery } from "../../../controller/dist/generated/graphql";
import { withApollo } from "../utils/withApollo";
const Home = () => {
const { data, loading } = useMeQuery();
return (
<div>Hello world</div>
);
};
export default withApollo({ ssr: true })(Home);So i am wondering,how can i do same thing with
|
Beta Was this translation helpful? Give feedback.
Answered by
TkDodo
Aug 29, 2021
Replies: 1 comment
-
|
since react-query doesn't actually do any data fetching for you, I'd say it depends on how you are fetching the data? Is it if you use something else, please consult the docs of whatever it is you use for data fetching :) |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
elisalimli
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
since react-query doesn't actually do any data fetching for you, I'd say it depends on how you are fetching the data? Is it
axios, then you can just pass headers to the request:if you use something else, please consult the docs of whatever it is you use for data fetching :)