RTK-Query meta response always empty object - redux

When using RTK-Query to call an API, I need to access a custom header value. I've tried various options for accessing the response headers from the documentation, but all attempts result in an empty object returned:
meta: {
"request": {},
"response":{}
}
I can see in the network tab, that the headers are provided in the response. This is part of a refactor from using raw Axios calls where the header was available from the response object as the headers property.
I've tried accessing the headers through the meta parameter on the transformResponse function of the createApi
transformResponse: (response, meta, arg) => {
console.log(`Transform -> meta: ${JSON.stringify(meta)}`)
// dataKey: meta.response.headers['x-company-data-key'],
return {
...response,
// dataKey
}
}
I've also tried accessing the headers via the meta property of the action parameter from the extraReducers function in the feature slice:
extraReducers: (builder) => {
builder.addMatcher(companyApi.endpoints.getSomeData.matchFulfilled, (state, action) => {
console.log(`action meta: ${JSON.stringify(action.meta)}`)
state.result = action.payload.result
// state.dataKey = action.meta.response.headers['x-company-data-key']
})
}
Both instances result in the meta object that looks like this:
meta: {
"request": {},
"response": {}
}
The API's base query looks like this:
baseQuery: fetchBaseQuery({
baseUrl: process.env.REACT_APP_API_ENDPOINT,
prepareHeaders: ( (headers, { getState }) => {
const realm = getState().companyAuth.realm
if (realm) {
const token = readToken(realm)
if (token)
headers.set('Authorization', `Bearer ${token.access_token}`)
}
return headers
})
}),
and finally, the endpoints definition for this API endpoint:
getCompanyData: builder.query({
query: (params) => {
const { location, page, pageSize } = params
return {
url: `/companies/${location}`,
params: { page, pageSize }
}
}
})
Based on what I could find in the documentation, GitHub issues, and PRs, it seems that the meta property should automatically add the headers, status, and other additional HTTP properties. I'm not sure what I've missed where the response object is completely empty. Is there an additional setting I need to add to the baseQuery?
I should note, that the response data is working properly. I just need the additional information that is returned in the custom header.

Related

Pass data from nextjs Link component and use it in getStaticProps

I have a dynamic route and I am trying to show the title in url and pass (hide) the id to my dynamic route and use id in getStaticProps. I have found that I can't pass data easily in nextjs as we used to pass with react router or other client routing libraries.
I am following this answer but when I console.log(context.params) I can't see the id passed from Link, what am I doing wrong here ?
// index.js
<Link
href={{
pathname: `/movie/[title]`,
query: {
id: movie.id, // pass the id
},
}}
as={`/movie/${movie.original_title}`}
>
<a>...</a>
</Link>
// [movieId].js
export async function getStaticProps(context) {
console.log(context.params); // return { movieId: 'Mortal Kombat' }
return {
props: { data: "" },
};
}
The context parameter is an object containing the following keys:
params contains the route parameters for pages using dynamic routes. For example, if the page name is [id].js , then params will look like { id: ... }. - Docs
export async function getStaticProps(context) {
console.log(context.params); // return { movieId: 'Mortal Kombat' }
return {
props: {}, // will be passed to the page component as props
}
}
If the dynamic page looks like /pages/[movieId].js you can access pid in context.params.movieId .
You can't access "Query String" in getStaticProps because as the docs state,
Because getStaticProps runs at build time, it does not receive data that’s only available during request time, such as query parameters or HTTP headers as it generates static HTML.
If you need "Query String", you can make use of getServerSideProps,
export async function getServerSideProps(context) {
console.log(context.query);
return {
props: {}, // will be passed to the page component as props
}
}
Edit:
About that Link, you should pass the same value as a key for query which you use for dynamic pathname:
<Link
href={{
pathname: `/movie/[title]`,
query: {
title: movie.id, // should be `title` not `id`
},
}}
as={`/movie/${movie.original_title}`}
>
</Link>;
And then in /pages/[title].js,
export async function getStaticProps(context) {
console.log(context.params); // return { title: 'Mortal Kombat' }
return {
props: {}, // will be passed to the page component as props
}
}
Note how title is being used as the key, both in filename and the query object in Link.

Fetching resources from google analytics services using HTTPS by Wix fetch function

How should I fetch data using Wix-fetch function?
I followed this google analytics API tutorial, this tutorial using post function for getting JSON data, I used WIX fetch function to get JSON file, but the return object is undefined.
What did I miss?
fetch( "https://accounts.google.com/o/oauth2/token", {
"method": "post",
"headers": {
"Content-Type": 'application/x-www-form-urlencoded'
},
'body' : JSON.stringify({
'grant_type': 'authorization_code',
'code': URLCode,
'client_id': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',
'client_secret': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
'redirect_uri': 'https://www.mydomain.or/ga/oauth2callback'
})
} )
.then( (httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json();
} else {
return Promise.reject("Fetch did not succeed");
}
} )
.then( (json) => console.log(json.someKey) )
.catch(err => console.log(err));
UPDATE
STEP 1
I used this URL to generate the CODE
wixLocation.to("https://accounts.google.or/o/oauth2/auth?scope=https://www.googleapis.com/auth/analytics%20https://www.googleapis.com/auth/userinfo.email&redirect_uri=https://www.mydomain.or/ga/oauth2callback/&access_type=offline&response_type=code&client_id=XXXXXXXXXXXXXXXXXX")
I get the CODE from the callback URL
Step 2
I used this code for the HTTP postman request
The redirect URI in step 1 and 2 is the following (the second one):
Step 1:
There needs to be an exact match between the redirect URI configured in the client id in the google developers console and the URL to get the code authorization.
The URL should be built as shown in the tutorial you linked (if you need a refresh token, you can add the access_type=offline)
https://accounts.google.com/o/oauth2/auth?scope=https://www.googleapis.com/auth/analytics&redirect_uri=<redirect_uri>&response_type=code&client_id=<client_id>
After you enter the URL, you will be provided with an authorization window. Once you authorize, you will be redirected to the <redirect_uri> you provided earlier. You will find the code as the first parameter in the URL query. e.g. <redirect_uri>/?code=<auth_code> ...
Since the access token is for one-time use only, if you will need it again, you will have to get a new <auth_code>.
Step 2 (Postman query example):
If you got the access_token correctly and you want to check now with WIX. Get a new <auth_code> (as said, the access token is given once) and set the code as follows:
import { fetch} from 'wix-fetch';
$w.onReady(function () {
const data = `grant_type=authorization_code&code=<your_authorization_code>&client_id=<your_client_id>&client_secret=<your_client_secret>&redirect_uri=<your_redirect_uri>`;
fetch("https://accounts.google.com/o/oauth2/token", {
"method": "post",
"headers": {
"Content-Type": 'application/x-www-form-urlencoded'
},
'body': data
})
.then((httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json();
} else {
return Promise.reject("Fetch did not succeed");
}
})
.then((json) => console.log(json.access_token))
.catch(err => console.log(err));
});

how to pass format to google cloud translation API using the client library?

We are using google cloud translation API in our express application.
I am trying to do translations using the client library instead of making an API request every time.
1. What I want to know is how to pass the options like format (text or html) to the api while using the client library?
I can achieve this via making http requests using requestjs like this:
var request = require('request');
var url = 'https://translation.googleapis.com/language/translate/v2';
var options1 = {
q: 'amore mio',
target: 'hi',
format: 'text',
source: 'it',
key: 'my API key'
}
request.post({url:url, qs:options1}, (err, res, body)=> {
if(err) {
console.log('ERR: ', err);
}
console.log('RES: ', res.statusCode);
console.log('Body: ', body);
})
But the sample for using client library shows only this:
const {Translate} = require('#google-cloud/translate');
// Your Google Cloud Platform project ID
const projectId = 'YOUR_PROJECT_ID';
// Instantiates a client
const translate = new Translate({
projectId: projectId,
});
// The text to translate
const text = 'Hello, world!';
// The target language
const target = 'ru';
// Translates some text into Russian
translate
.translate(text, target)
.then(results => {
const translation = results[0];
console.log(`Text: ${text}`);
console.log(`Translation: ${translation}`);
})
.catch(err => {
console.error('ERROR:', err);
});
Is there a way I can pass options like 'format' using the client library?
How can I pass an array of strings to the q attribute (querystring) of the options object in the first method? If I pass an array directly like:
q: ['amore mio', 'grazie']
I get an error message :
RES: 400
Body: {
"error": {
"code": 400,
"message": "Required Text",
"errors": [
{
"message": "Required Text",
"domain": "global",
"reason": "required"
}
]
}
}
With respect to question 2 about passing the array of input arguments, this works fine if you use cURL to send the POST request similar to this example. I have tried it myself with success. I have tried to do different manipulations with your code from snipper 1 with the request library, but it seems as if the request library is not passing the array correctly. I would generally suggest using the client library which can successfully handle arrays in the input text.
Okay after a little research I just tried to pass options object with format and other properties (like source and target language) instead of target, and it worked.
So this can be achieved by:
const options = {
to: target,
format: 'html',
prettyPrint: true
}
translate
.translate(text, options)
.then(results => {
const translation = results[0];
console.log('flag: ', Array.isArray(translation));
console.log(`Text: ${text}`);
console.log(`Translation: ${translation}`);
})
.catch(err => {
console.error('ERROR:', err);
});
Use JSON.stringify
`https://translation.googleapis.com/language/translate/v2?q=${JSON.stringify([array]}`

How can I add data to the pending action?

I am using Axios, Redux and Redux Promise Middleware.
I have the following action creator:
return {
type: 'FETCH_USERS',
payload: axios.get('http://localhost:8080/users',
{
params: {
page
}
}
)
}
In my reducer for the FETCH_USERS_PENDING action, I would like to save the requested url in my state. How can I do this?
You want to use redux-promise-middleware's "meta" variable. Like so:
return {
type: 'FETCH_USERS',
meta: { url: 'http://localhost:8080/users' },
payload: axios.get('http://localhost:8080/users', config)
}
You could pass it through in your params, but that won't be returned until the page is fetched. Which means it won't be passed back during FETCH_USERS_PENDING.
And I'm pretty sure if you include directly in the return object (like how Lucas suggested), it will be stripped out of the FETCH_USERS_PENDING stage.
Here's the FETCH_USERS_PENDING stage from redux-promise-middleware:
/**
* First, dispatch the pending action. This flux standard action object
* describes the pending state of a promise and will include any data
* (for optimistic updates) and/or meta from the original action.
*/
next({
type: `${type}_${PENDING}`,
...(data !== undefined ? { payload: data } : {}),
...(meta !== undefined ? { meta } : {})
});
As you can see during this stage, the middleware returns the appended "type" attribute and it checks for "data" & "meta" attributes. If present, they are passed along within the action.
Here's the redux-promise-middleware source code if you want to look into it further.
Simply pass the URL in the action as well:
return {
type: 'FETCH_USERS',
url: 'http://localhost:8080/users',
payload: axios.get('http://localhost:8080/users', {
params: {
page
}
}
}
and access it in the reducer with action.url. Or you can leave the action as it is, and access it in the promise resolution:
action.payload.then(function(response) {
var url = response.config.url;
});

Iron Router parse posted values

I am currently trying to catch posted values from form inside specific route rule.
Since all the other SO posts about this do not work I wanted to ask again.Do you have this sorted out and implemented in your projects?
Is there a solution for Iron-Router#1.0.9?
this.request.body
Above code inside route rule always returns undefined.
Router.route('/register', function(){
console.log( JSON.stringify(this.request.body) );
//this.render('test',{data:{data:this.request.body.username}})
});
//SERVER ONLY
if (Meteor.isServer) {
Meteor.methods({
'addSong': function(songName) {
var userId = Meteor.userId()
songs.insert({
userId: userId,
name: songName
})
}
})
Router.onBeforeAction(Iron.Router.bodyParser.urlencoded({
extended: true
}));
}
The iron router guide lets us know that this.request and this.response are "NodeJS request and response objects".
If you take a look at some documentation for req.body, you will find that:
By default, it is undefined, and is populated when you use
body-parsing middleware such as body-parser and multer.
From Iron-router's guide:
IR makes express' body-parser available at Iron.Router.bodyParser.
So there you have it! If you want this.request.body to be populated, you should maybe add:
Router.onBeforeAction(Iron.Router.bodyParser.urlencoded({
extended: true
}));
I have created one file for my controller to maintain code re-usability name as solar.js under controller folder that solar file has my db functionality and pass the request and response as parameter for that file like exports.getSolarInfo = (req,res) => { console.log(req.body) }, here your will get ur body paramter.then manipulate our functionality here then send response like response = { "status" : 0, "result" : "invalid query" } res.end(JSON.stringify(response));
// importing controller
const SOLAR = require('./controllers/solar.js');
Router.route( '/solar', function() {
//setting header type to allow cross origin
this.response.setHeader( 'Access-Control-Allow-Origin', '*' );
if ( this.request.method === "OPTIONS" ) {
this.response.setHeader( 'Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept' );
this.response.setHeader( 'Access-Control-Allow-Methods', 'POST, PUT, GET, DELETE, OPTIONS' );
this.response.end( 'Set OPTIONS.' );
} else {
SOLAR.getSolarInfo(this.request,this.response);
}
}, { where: 'server' });

Resources