I'm building a React app that fetches data from a server and also passes static data to various components based on a user's selection from a dropdown menu. I'd like to use Relay Modern, but I've been unable to find anything in the docs about whether it supports manually loading static data to the store. Anyone know if this is possible/how to implement?
btw, I've seen a few similar questions about this here and elsewhere. But, it appeared that those pertained to Relay Classic rather than Relay Modern, which implemented massive changes.
I have have asked myself the same question. There must be a way to hydrate the Store/RecordSource. As a workaround I have been doing something like this. I create a query for the data that I want to add to the store and call commitPayload.
import {
createOperationSelector,
getOperation
} from 'relay-runtime';
const query = graphql `{ viewer { name } }`;
const environment = new Environment(...);
environment.commitPayload(createOperationSelector(getOperation(query)), {
viewer: {
name: 'Me'
}
});
Wondering if anyone from the relay team has some insight?
Related
I'm using nextjs 13 with experimental app directory. My app uses dynamic routing like so:
https://app.domain/[itemid]/[slug]
In my [slug] directory, if I create pages.jsx, a server site route, with the following:
export default async function pageComponent ({ params, ...props }) {
console.log('params': params);
const data = await afunction(params.itemid);
...
The app works as expected when I run as dev. A url such as:
https://app.domain/44/pagetitle
Outputs params.itemid = '44' and params.slug = 'pagetitle' in the console, as I expected.
Problem
I can't build the app for production. If I run npm run build, it attempts to compile page.jsx and finds that afunction on pageComponent is undefined as it had no params.itemid. A user never targeted a specific url, so no params were generated when it's building. The params come from dynamic values set in a growing database. The various values in the database may be edited so I don't want an entirely static page.
Research
Based on the documentation, I'm unsure of how else I'm supposed to handle this. I feel I'm missing a step here but I don't feel I need to generateStaticParams but perhaps I'm wrong on this one?
In my situation, the solution was to add a generateStaticParams function, after all. There is a light reference to it in the documentation, under dynamic segments, which I read as an optional preference. Although I wasn't interested (yet) in having static pages created at build time, I was unable to get params working at all without using it, once building and using server side components.
For my use case, I attempted to create a single static page, using it:
export async function generateStaticParams() {
const staticParams = [
{
itemid: '4214',
slug: 'apagetitle'
}
]
return staticParams;
}
Which allowed the app to build successfully. Note, this was just for testing purposes and trying to better understand the issue. From the examples, this is intended to generate static pages for entire, or large sections of a database and the examples in the documentation illustrate this fine.
I'm wondering if there is a nice way to have a UUID for a Vue JS 2 App.
I'm currently developing a Laravel API that is consumed by Android/IOS devices that identifies themselves by using the installation_id. Since it only changes on new app installation, it seems like the best approach for this purpose.
Now I have to develop the Vue JS app, but of course, there is no such thing. I've found this package but unfortunately, it only supports Vue JS 3: https://github.com/VitorLuizC/vue-uuid
Basically, what I need is to have uuid per app instance which persist on page refresh and even of hard refresh (not sure if possible at all) meaning clearing the app data from localStorage.
So far, I can only imagine creating a random uuid using this and storing it on localStorage, then on app mount check if this uuid exists on localStorage and if not, store it, otherwise just continue on.
import { v4 as uuidv4 } from 'uuid'
...
new Vue({
router,
mounted () {
if (!localStorage.getItem('installation_id')) {
localStorage.setItem('installation_id', uuidv4())
}
}
render: h => h(App)
}).$mount('#app')
I will appreciate any help to get the right path to achieve this.
I'm fairly new to Django and React but have a good grasp of Python and JavaScript.
What I'm trying to do is use the Web MIDI API to monitor some MIDI data, extrapolate some information from it and store that in a database. It's basically for a DAW, Software synth monitoring system, information can be transmitted as MIDI to the browser (via IAC) and then various pieces of information stored in the database. This needs to be done per user, with user data separation. I'm guessing I would need to implement a CRUD API. I currently have a Python project that does this and holds the data in memory formatted as JSON - the plan is to take this and turn it in to a Web App.
I've watched and followed a bunch of tutorials on integrating Django & React and also found this boilerplate for a basic login system.
https://github.com/justdjango/django-react-boilerplate
If possible I'd like to use this and just add in the functionality I need, can anyone point me in the right direction of where to start and where I would add the additional code for the MIDI stuff to this boilerplate.
There is another stage to this project but my aim is to tackle this step first and hopefully I'll gain a better understanding from there.
I've looked at this question:
django: keep each users data separate
I found the best way of integrating it after a bit of trial and error, so I'll answer it here for anyone else looking to do this kind of thing.
I've used a midi.js script with all the Web MIDI logic contained.
At the moment it just looks like this:
export default function () {
navigator.requestMIDIAccess().then(onMIDISuccess);
function onMIDISuccess(midiAccess) {
for (var input of midiAccess.inputs.values())
input.onmidimessage = getMIDIMessage;
}
}
function getMIDIMessage(msg) {
console.log(msg.data);
}
Then I've used a react component that renders nothing but imports and calls this midi logic from within the hook componentDidMount(). THIS was the key part that was missing and what makes it work. I've read a bit about it and it's to do with the lifecycle of the App.
That looks like this:
import { Component } from "react";
import midi from "./midi";
class ReceiveMIDI extends Component {
componentDidMount() {
midi();
}
render() {
return null;
}
}
export default ReceiveMIDI;
So far this is working for just logging the data to the console, I've already got a scaffold App set up and I'm now just writing a function to turn the MIDI into a post request to store the data in the database.
I'm currently working on a Laravel/Vue.js project where I need to use the same data (i.e. Static list of Operating Systems) both in the backend and frontend. So far these are the different options I've thought of:
Duplicate data both in my Laravel and vue.js projects.
Load the data into the frontend through the API
Share, the data through a common static config file and possibly preload the data into Vue at processing time (currently using webpack)
The third options seem to be the best of them all as it avoid duplication of data and the need to make unnecessary requests and wondering if it's possible to accomplish with existing tools.
Well the best way would depend on the specifics of the app.
I typically prefer #3 as that's the "Laravel way". Use variables prefixed with MIX_ in your .env file and access them in the frontend using process.env.MIX_VARIABLE_NAME as described in the Laravel docs. Access them in the backend using the env helper
Although arrays are not supported, you can always construct them in the backend and frontend like so:
$config = [
env('KEY1') => [
env('KEY_ONE') => env('VALUE_ONE'),
env('KEY_TWO') => env('VALUE_TWO')
],
...
};
I'm trying to write a very simple example application to familiarize myself with using MongoDB. Essentially, I'd like to have a single web page which queries a local MongoDB server, adding and removing content dynamically using jQuery. I have no problem at all throwing together the page layout and the jQuery, but I'm getting more and more confused by the MongoDB part of the equation. I understand that MongoDB is a server and runs remotely from the client, but for my example, I simply want to be able to query quickly and easily from client-side in-browser JavaScript:
$("#toggle").click(function() {
if ($(this).is(":checked") {
// add items from mongodb
addItems(mongodb.test.find({ age: { $gt: 5 }}));
} else {
$("#results").hide();
}
});
Is there a way to interface with MongoDB this way?
You need a driver to connect to a MongoDB server. The list of drivers is here:
http://www.mongodb.org/display/DOCS/Drivers
There is a JS driver, but only for server side JS - specifically node.js
Bottomline, you can't connect directly from a browser. You need a server side component.
As #balafi states you need a driver.
MongoDB does have a REST interface and infact there are drivers such as Mongoose that designed to create a fully functional REST interface for MongoDB.
This could be the route to go if you want to use MongoDB without all the hassle of setting up a server end. This way you would just ping a POST or GET call from JQuery with the specified params you want.
You can find more information on the REST interfaces here: http://www.mongodb.org/display/DOCS/Http+Interface
However I should warn you the built in one for MongoDB is extremely lacking and is only designed for extremely simple queries.