I'm developing site with Gatsby and Prismic.
I am implementing prismic preview with prismic-javascript. When click the preview on prismic, gatsby redirecting it to the proper URL but updated content not displaying now.
I tried to use the gatsby-source-prismic-preview plugin but it not worked.
const Preview = ({ history, location }) => {
useEffect(() => {
const params = qs.parse(location.search.slice(1))
if (!params.token) {
return console.warn(`No token available, check your configuration`)
}
client.previewSession(params.token, linkResolver, '/')
.then(url => {
navigate(url);
})
.catch(err => console.log(err))
})
return null
}
This is my preview page.
Please let me what is my mistake.
I'm not familiar with gatsby-source-prismic-preview but I'm not sure it's really up to date anymore.
You should take a look at https://github.com/birkir/gatsby-source-prismic-graphql, It's the official plugin developed by the same guy that does gatsby-source-prismic-preview and it's backed up by the Prismic team.
Maybe open an issue on GitHub if you don't feel like migrating to the new one.
Related
I have a React Frontend and Django Backend. In my frontend I want to include a view for the PDF obtained by the backend. I tried using iframe and object HTML Tags, but they failed due to the missing authentication. My suggested approach would be requesting the PDF with axios.get, since this automatically handles the authentication. However, I could not find out how to handle the obtained PDF in case of temporarily storing and displaying it with react.
Currently my function is able to obtain the PDF and display it in a new window but I want to include it as an element within the current page.
const getPDF = () => {
axios
.get(
`${process.env.REACT_APP_API}/Link/to/the/PDF/`,
{
responseType: "blob",
}
)
.then((r) => {
window.open(URL.createObjectURL(r.data));
});
};
#react-pdf/renderer is used to render pdf from your page/application and is not made to render already made pdfs
You can use react-pdf to do what you want. It works great and lets you style your component the way you want.
In the content of the page I put the following:
<iframe src="" width={600} height={600} />
And I adapted the function to fill the iframe:
const getPDF = () => {
console.log("getPDF");
axios
.get(`${process.env.REACT_APP_API}/Link/to/the/PDF/`, {
responseType: "blob",
})
.then((r) => {
console.log(r.data);
const file = window.URL.createObjectURL(r.data
);
const iframe = document.querySelector("iframe");
if (iframe?.src) iframe.src = file;
})
.catch((err: AxiosError) => {
console.log(err);
});
};
So you have half the work done! in the other half, maybe an option is to look at this component:
#react-pdf/renderer
I used this package without any complaints.
** Sorry for redirecting to the wrong library. I use this instead:
pdf-viewer-reactjs
I am trying to deepLinking and catching the url when url open the page on the screen which is functionally works when my app is not working on the background. However, it doesn't work if app is working on the background.
const isFocused = useIsFocused();
useEffect(() => {
getCode();
}, [isFocused]);
const getCode = async () => {
//we will generate a button in the forget password email, link will include a url ===> mobile://auth/new-password?verification=534396
const url = await Linking.getInitialURL();
console.log('url', url);
if (url?.includes('new-password')) {
//problem, it may not work if app is still working on the background
const query = queryString.parseUrl(url);
const verifyCode = query.query.verification;
setVerificationCode(String(verifyCode));
setIsLoading(false);
} else {
Alert.alert('Something went wrong');
}
};
When I directlinked to application with the link, it console log as "url null". Is my problem on the focusing part or on the getInitialUrl function?
I was experiencing a similar issue.
In my case we used linking from NavigationContainer and it would open the same X screen left on background regardless if the deeplink data had a different value for that screen.
I fixed it by using the getId on Stack.Screen:
const getId = ({ params }) => params?.id;
<Stack.Screen name="X" component={XComponent} getId={getId} />
You can find more info on getId here https://reactnavigation.org/docs/screen/#getid.
I'm new to react. I have a problem with url.
I get data from Github API through fetch request. Now I have to show only URL from API data but it shows me project url and data url mixed.
Here's the code which will simplify the problem.
fetch(
`https://api.github.com/users/${username}/repos?per_page=${count}&sort=${sort}&client_id=${clientId}&client_secret=${clientSecret}`
)
.then((res) => res.json())
.then((data) => {
this.setState({ repos: data });
})
.catch((err) => console.log(err));
this will update state with result data.
Here I destructured it from state.
const { repos } = this.state;
<Link to={repo.html_url} className="text-info" target="_blank">
{repo.name}
</Link>
now I mapped repos and return JSX and show html_url from data. But the problem I'm facing is not showing url from data.
It shows like this
<a class="text-info" target="_blank" href="**/profile/**https://github.com/ahsandani001/amazon-clone">amazon-clone</a>
I copy this from chrome devtools. ("/profile/" is extra).
How can I remove this. Where am I mistaken?
Somebody help. Thanks in advance.
I have implemented deep links for my app with React Navigation V5.
I have a problem regarding Deep Linking. If the app is closed(killed) and it is opened via a deep link it will take me to the home screen rather than the screen it has to take me to.
Here's my linking config, from what I've read in the docs (here), i'm passing the URL from the getInitialUrl function to the subscribe and here
const onReceiveURL = ({ url }) => listener(url);
it should parse the URL to a valid navigation state and take me to the screen it has to. I might be mistaken with how subscribe works, though.
Any help is appreciated, thanks in advance!
const linking = {
prefixes: ['appName://', 'app.appName.com://', APP_WEB_DOMAIN],
async getInitialURL() {
// Check if app was opened from a deep link
const url = await Linking.getInitialURL();
if (url != null) {
return url;
}
},
subscribe(listener) {
const onReceiveURL = ({ url }) => listener(url);
Linking.addEventListener('url', onReceiveURL);
return () => {
// Clean up the event listener
Linking.removeEventListener('url', onReceiveURL);
};
},
config: {
screens: {
SignInScreen: 'login',
UnauthenticatedStack: '',
TrackListScreen: 'playlist/:id/' //:id gets parsed as a string, you have to specify it if you want a number.
}
}
};
I had a similar issue (deep link from push notification) due to a bug in react-native-splash-screen
have a look here https://github.com/spencercarli/react-native-splash-screen-demo/pull/11
I'm trying to create a blog page to test nextjs and created a dynamic route for the posts, which will be retrieved from Contentful. When navigating from Home page and clicking into a next/router <Link /> component, the blog post loads correctly, but if I get the URL and try loading the page directly from browser address bar, I'll get 404.
Steps to reproduce:
1. git clone https://github.com/zeit/next-learn-demo.git
2. cd next-learn-demo/8-deploying
3. yarn
4. next build && next export
5. cd out
6. serve
7. Navigate to http://localhost:5000/p/learn-nextjs
8. See 404
Is this a limitation of NextJS (didn't find anything related to it on documentation) or do we need to configure anything else?
The real issue is that exporting a next app will make it generate static HTML files. Even though it will still be able to request data before rendering the page, the set of available paths are not dynamic (they are generated during the next export command). See this docs and this example.
Based on this, I have 2 possible solutions:
generate a webhook to trigger a next build && next export command every time a new blog post is published in Contentful;
avoid exporting my next app and host a Node server that will handle the dynamic routes.
That's because when you directly access the link or refresh the page then it add's a slash at the end of route. An next.js doesn't recognize any route like that. To fix this, I hope there should be an easiest way to do that. However you can do this using custom server. Here is an example:
server.get("/about/", (req, res) => {
return app.render(req, res, "/about")
});
Hope this will help you.
To extend the answer provided by #Minoru, the official Next documentation covers this case in this example.
Using getStaticPaths and getStaticProps allows you to create dynamic pages at build time, avoiding the 404.
Example code for posts dynamic page:
import { GetStaticPaths, GetStaticProps } from 'next';
const Post = ({ post }) => {
const { id, content } = post;
return (
<div>
<h1>Post {id}</h1>
<p>{content}</p>
</div>
);
};
export const getStaticPaths: GetStaticPaths = async () => {
// Get all posts via API, file, etc.
const posts = [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }]; // Example
const paths = posts.map(post => ({
params: { id: post.id },
}));
return { paths, fallback: false };
};
export const getStaticProps: GetStaticProps = async context => {
const postId = context.params?.id || '';
// Get post detail via API, file, etc.
const post = { id: postId, content: `I'm the post with id ${postId}!` }; // Example
return { props: { post } };
};
export default Post;
When building the site with next build && next export we will see in the out folder that Next has created each post page
Then, when you navigate to /posts/3/ you will see the post with id 3
For reference, this docs page contains this case and many other use cases.
Don't want to infringe any old posts rules, but in case anyone else in my context I use vercel's feature webhook to new deploys and as I was using firebase I've created a simple firebase function whith is hooked to a new event creation of a page triggers the webhook. I've used fetch because we can make a GET request according to the docs
exports.newEventAdded = functions.region('us-central1').firestore.document('local_events/{localeventId}')
.onCreate((snap, context) => {
fetch('https://api.vercel.com/v1/integrations/deploy/process.env.NEXT_PUBLIC_VERCEL_WEBHOOK_ID')
.then(function (response) {
return response.json();
})
.then(function (myJson) {
console.log(JSON.stringify(myJson));
});
})