I am using apolloClient to send requests to a graphql Server.
However since my application use Redux I followed this document apollo-redux to be able to implement apollo client with Redux.
here is my client's code:
const client = new ApolloClient();
const store = createStore(
combineReducers({
apollo: client.reducer(),
// others
})
however the line client.reducer() fires an error
client.reducer is not a function
How may I correct this error
Since redux is not being used as cache for Apollo starting with 2.0, you should now use the provided Apollo store:
import { ApolloProvider } from "react-apollo";
const App = () => (
<ApolloProvider client={client}>
<div>
<h2>My first Apollo app 🚀</h2>
</div>
</ApolloProvider>
);
See https://www.apollographql.com/docs/react/recipes/2.0-migration.html#redux
Related
I am referring this https://firebase.google.com/docs/functions/beta/auth-blocking-events documentation to implement Blocking auth triggers using 2nd generation cloud function for firebase,
I have created and deployed functions but the problem is that, while registering the triggers under the Blocking functions tab in the Firebase Authentication console, It does not shows that deployed triggers (beforeUserSignedIn, beforeUserCreated) for registering.
Below is my code,
import functions from 'firebase-functions/v2'
import admin from 'firebase-admin'
import { beforeUserCreated, beforeUserSignedIn } from 'firebase-functions/v2/identity'
import serviceKey from './serviceKey.json' assert {type: 'json'}
admin.initializeApp(serviceKey)
export const beforecreated = beforeUserCreated((event) => {
console.log("EVENT DATA FOR AUTH beforecreated....", event.data)
return;
});
export const beforesignedin = beforeUserSignedIn((event) => {
console.log("EVENT DATA FOR AUTH beforesignedin....",event.data)
});
I have tried Blocking auth triggers for first-generation cloud functions for firebase and it's working fine, and also I can register that blocking auth triggers. But this is not working for the second generation cloud function for firebase.
I'm using localStorage on the server and it works fine locally. But when I deployed my code to Deno deploy is not defined
Do I need to import the localStorage? I Deno.com I couldn't find any docs talking about localStorage so maybe that feature is not supported yet. In that case, where can I deploy my code to use it? Thanks
import {Handlers, PageProps} from "$fresh/server.ts";
interface Data {
email: string[]
}
export const handler: Handlers<Data> = {
GET(_req, ctx) {
const emailsStorage = localStorage.getItem("email");
const email = emailsStorage ? JSON.parse(emailsStorage) : [];
console.log(email);
return ctx.render({ email });
},
};
export default function EmailPage({ data }: PageProps<Data>) {
const { email } = data;
return (
<main>
<h1>Emails</h1>
<ul>
{email.map((email) => (
<li>{email}</li>
))}
</ul>
</main>
);
}
The full list of available APIs is here (note that localStorage is not listed).
Deploy does not offer any persistent data storage mechanism. After your deployed code finishes executing in response to a request, all of the JS memory is destroyed, so if you want to work with mutable data that persists between requests, then you'll have to store that data yourself elsewhere — e.g. by sending the data in a network request to another server / hosted database / etc. and then requesting it when you need it.
The docs include several "persist data" tutorials that you can use as a guide/reference in order to learn.
You can persist data in local storage by creating a virtual local Storage by using this code.
import { installGlobals } from "https://deno.land/x/virtualstorage#0.1.0/mod.ts";
installGlobals();
localStorage.getItem("email") will work on Deno Deploy also.
Nuxt 3 has those amazing data fetching functions (ex.: useFetch), but I come out on a situation that I need to make request after the rendering time (ex.: calling from a button and send a search term).
As I far know, useFetch are not working on client-side, here is what I have trying to do
<template>
<button #click="goSearch()">Search</button>
</template>
setup() {
const goSearch = async () => {
const { data } = await useFetch('search', () => $fetch('/api/search'));
console.log(data.value);
};
return { goSearch };
},
}
Does nuxt3 offers a built in function to make http request on demand (client-side official http axios like)?
$fetch should work. The problem were a small bug that is now fixed. If you are experiencing this bug, just upgrade nuxt/ohmyfetch lib
npx nuxi upgrade --force
More here:
https://github.com/nuxt/framework/issues/2502#issuecomment-999783226
useFetch is the same as using $fetch, here why not simply use fetch already in your code ?
const { data } = await $fetch('/api/search' );
i think you code is simply no just youcan use useFetch even on client side but like that :
const { data } = await useFetch('/api/search')
I'm using Redux to manage state and Apollo to execute graphQL queries.
I create an Apollo client that should be accessible from various React components.
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
const link = new HttpLink({
uri: getGraphqlEndpointUrl,
headers: {
'x-api-key': getApiKey(),
'Authorization': jwtToken,
},
});
const client = new ApolloClient({
link: link,
cache: new InMemoryCache(),
});
How do I do this with Redux? Do I store the client in a variable in the Redux store? That seems a bit strange to me, but not unreasonable. Is there a better way though?
Only serializable objects should be stored through redux -- functions or objects that have functions as properties do not belong in a redux store. If you need to reference the Apollo client outside of the component hierarchy of your React app, just create a module that exports the client object itself (not a function that creates a client). Then you can just import the client whereever (including the code that includes your ApolloProvider) and all your code will point at the same instance of the client (and the same cache).
It's important that the module for your client export the instantiated client itself -- if you export a function that creates the client, you'll be recreating it each time you import it.
I would be thankful if someone could point me into a right direction in understanding the Redux architecture.
I should implement "reducer" functions that will handle my actions.
Reducer functions should be combined and create a store.
Lets say I have a LoginForm (React) component, that makes a XHR request to backend API, and receives a JWT token in response.
When I get the response from the API I should dispatch an action like:
store.dispatch({type: "USER_LOGGED_IN",
payload: {username: "john", JWT: "..."});
This updates the state of my application.
What next?
How do I route to to next page? How do I rerender my components (like navbar, etc.) with the logged in username?
Do I use listeners for that?
Let's say you've a method to authorize user:
import { browserHistory } from 'react-router';
// ...
function promisedApiCall(inputData) {
// ...
// api request to backend with input data
// return a promise
}
/*
* on form submit we call this with input data
*/
function authorizeUser(inputData) {
return promisedApiCall(inputData)
.then((response) => store.dispatch({
type: "USER_LOGGED_IN",
payload: {
username: response.userName,
JWT: response.JWT
}
}))
.then(() => browserHistory.push('/success/path/url'))
.catch(() => browserHistory.push('/failure/path/url'));
}
Assuming you have the following prerequisites:
Created redux store and store object is available in the scope where authorizeUser() is executed.
The method promisedApiCall is the function which makes the request to backend with input data from LoginForm.
promisedApiCall should return a promise. [this is really important]
Configured react-router with redux
Once this is complete, app state is updated with user info and also user will be redirected to a new page. This post explains more about programmatically redirecting using react-router.
Access you app state in you component using Redux connect.
Now you have the user info in your component as props.
react-router has a component browserHistory.You can import that like this,
import {browserHistory} from 'react-router';
And to change your route,
browserHistory.push(<route_where_you want_to_go>);
This will let you change the route.