henvo / ra-jsonapi-client Goto Github PK

Sorry to as question here.
What can I do when the API return data format with Capital Key

data:[
    {ID:1, Name: stave},
    ....
]

Does this package allow to customize the key?
or what can I do to get it work?

Hi @henvo - thanks for creating this library. For background, I am trying to hook react-admin up to a Laravel back end using https://laraveljsonapi.io/. It's going okay so far.

I noticed that when an HTTP error occurs (for example because of sending an attribute that isn't allowed), react-admin shows a blank screen and I get a console error Polyglot.transformPhrase expects argument #1 to be string.

I had a look at the error handling and the following code treats the entire response body a message field for the error:
https://github.com/henvo/ra-jsonapi-client/blob/master/src/initializer.js#L39

The JSON:API spec says that errors should include a top-level errors array:
https://jsonapi.org/format/1.1/#errors

And indeed this is what laravel-json-api returns:

{
   "jsonapi":{
      "version":"1.0"
   },
   "errors":[
      {
         "detail":"The field companyId is not a supported attribute.",
         "source":{
            "pointer":"\/data\/attributes"
         },
         "status":"400",
         "title":"Non-Compliant JSON:API Document"
      }
   ]
}

I am unfamiliar with what level of detail react-admin supports for errors, but perhaps we should attempt to extract error information from the response, and fall back to using the entire response body only if it's a string.

Happy to submit a PR if it might be accepted.

The current implementation doesn't handle modifying resources that have relations, because it submits related references in data.attributes instead of data.relationships.

For instance, assigning a post to an author should submit something like:

{data: {type: "posts", attributes: { ... }, relationships: {author: {data: {id: "1"}}}}

Refs #8

I'd like to get the meta jsonapi field into the resultant object.

When creating a Datagrid inside of a ReferenceManyField, clicking any field in the Datagrid header doesn't include the sort params in the request. I've created an example for you to see what I mean- Clicking the "Created at" header sends a request without any sort params. This was addressed in React-Admin here- marmelab/react-admin#752

  <Edit {...props}>
    <TabbedForm>
      <FormTab label="User">
        <TextInput source="name" />
      </FormTab>
      <FormTab label="Posts">
        <ReferenceManyField reference="posts" target="user_id" >
          <Datagrid>
            <TextField source="description" />
            <TextField source="created_at" />
          </Datagrid>
        </ReferenceManyField>
      </FormTab>
    </TabbedForm>
  </Edit>

I got an error Unsupported Data Provider request type GET_MANY when trying to load page with ShowGuesser component. I am not sure, at the which concrete moment it happens, but, I guess, it happens because of this:

This file has 2 switch conditions. First of them has GET_MANY case and works ok. But second switch has no GET_MANY and if type variable has value GET_MANY - executing is falling to default of this switch.
What am I doing wrong or how can I solve it?

It's a bit frustrating that ra-jsonapi-client actually requires your API to attach a total-count meta key. I am aware that the name of the key can be customized, but I wish that I could set total to null, and not have it throw an error.

Or is there a requirement enforced by React Admin that every list needs a count?

Change this to 'PATCH' instead:

https://jsonapi.org/format/#crud-updating

Please make this simple change asap, instead of me making a pull request for this one word change.

I can't custom http header:

import jsonapiClient from "ra-jsonapi-client";

const token = localStorage.getItem('token');
const settings = {
  headers: {
    Authorization: `Bearer ${token}`,
    Accept: 'application/vnd.api+json; charset=utf-8',
    'Content-Type': 'application/vnd.api+json; charset=utf-8',
  }
}
const dataProvider = jsonapiClient('https://dev.mysite.com/api/v1', settings);
const App = () => (
    <Admin dashboard={Dashboard}  dataProvider={dataProvider}>
        <Resource icon={UserIcon} name="post" list={ListGuesser} />
    </Admin>
);

But in request header become Basic Auth

Provisional headers are shown
Accept: application/vnd.api+json; charset=utf-8
Authorization: Basic Og==

Authorization should be Bearer token
I may miss somting. thanks for your help.

Hi @henvo ,

I have just hit an issue where I wanted to delete multiple records in a list by checking their boxes and hitting Delete. React-admin issues a DELETE_MANY request in that case but it appears to not be supported by ra-jsonapi-client.

According to the documentation at https://marmelab.com/react-admin/DataProviders.html#usage the task for the JSON API client is to issue multiple DELETE requests, but I would probably suggest to use the filter approach like in the case of the GET_MANY request. I would happily parse the query string on my end in the server and go from there.

Thanks. 🙂

The npm build for version 0.4.7 does not contain the updates from the pull request #12 add get many.

The files in the build/ folder do not match those in the src/ folder.

Could you rebuild the release to add the missing updates.

Thanks.

Hi,

I wanted to integration with Drupal 8 via its jsonapi module but I'm having problems.

https://www.drupal.org/project/jsonapi

I can see datas taken from Drupal in Network.

import React from "react";
import { Admin, Resource, ListGuesser} from "react-admin";
const settings = { total: 'total-count' };
const dataProvider = jsonapiClient(`http://d8api.docksal/jsonapi/node`, settings);

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="article" list={ListGuesser} />
  </Admin>
);

export default App;

Here is the error I'm getting:

Here is network tab:

What am I doing wrong?

Hi Henning,

I have just tried to use react-admin's FileInput because I need to be able to upload a file to the server but the server does not receive the actual file data, only the handle that RA documentation says is a File object.

Is my understanding correct in that the client does not detect and process possible instances of File when dispatching a request to the server? Since I need this functionality asap, I am thinking about adding it there myself, but I am quite new to JS and don't have a clear idea on how to tackle this. Could you give me any hints or tips?

Thanks. 🙂

Shouldn't this be total = response.data.meta[settings.total]?

I have been using this package to integrate react-admin with Laravel, using https://github.com/laravel-json-api/laravel.

The https://github.com/laravel-json-api/laravel is strict about the Media Type headers, in accordance with the JSON:API specification, which states:

https://jsonapi.org/format/1.1/#content-negotiation-clients

The JSON:API media type MUST NOT be specified with any media type parameters other than ext and profile

You can see a discussion regarding a similar issue with another library here:
laravel-json-api/laravel#162

I would recommend removing charset=utf-8 from the Content-Type and Accept headers.

Of course, it's possible to work around this issue by providing settings, but it seems like the defaults should align with the JSON:API specification.

const dataProvider = jsonapiClient('https://example.com/api/v1', {
  headers: {
    "Content-Type": "application/vnd.api+json",
    "Accept": "application/vnd.api+json",
  }
});

Got 406 while using react-admin.

Default settings:

headers: {
    Accept: 'application/vnd.api+json; charset=utf-8',
    'Content-Type': 'application/vnd.api+json; charset=utf-8',
}

JSON API spec:

Servers MUST respond with a 406 Not Acceptable status code if a request’s Accept header contains the JSON:API media type and all instances of that media type are modified with media type parameters.

Hi @henvo ,
I am using ra-jsonapi-client in my project and I am currently trying to make work the redirect to the login page of react-admin when backend API returns 401/Unauthorized. I can see the expected response getting returned from the API and react-admin also shows the error pop-up at the bottom of the screen, but I cannot for the life of me get react-admin to redirect to the login page.

I started digging into the code and I am confused about the way ra-jsonapi-client goes about propagating the errors to the upper levels. I am still fairly new to this so could you please elaborate on how 401/403 codes are propagated upwards?

I have noticed there is a HttpError class defined in errors.js but I don't see it used anywhere. Does axios do the propagation?

Thanks very much in advance.

I am not using JSONAPI or react-admin anymore. Therefore my motivation to keep this repository up to date and develop new features is limited and I don't have the time to take care of open pull requests and issues.

It seems this library is still being used by some people so I am happy to pass the scepter on to one or multiple maintainers who are able take care of this project while keeping an eye on best coding practices and compliance with the JSONAPI specification.

If you're interested you can write me an email or comment here.

I am consuming json api, seems like the backend api server throwing validation exception as the data provider is passing ID attribute inside attributes key.

How do I prevent data provider from passing ID attribute into attributes?

Second question I have is filtering format?
currently the data provider sends filter like this filter={['id':['2']]}
while it should be something like this filter[id]=2 or filter[id]=1,2

Need help please, stuck with this from last two days.

Thanks

Hi,

I came across devour json api client
https://github.com/twg/devour

Looks to me it makes sense to utilize it to implement react admin data provider as it has almost all features, why reinvent the wheel.
I have already started it, anyone interested let me know will share the repo. :)

Thanks

What you were expecting:
The URL GET generated by jsonapiClient should be: http://localhost:4500/employees?filter[id]239749,239748,235523

What happened instead:
Seems like URL is being created by react-admin is invalid

http://localhost:4500/employees?filter[id][]=239749&filter[id][]=239748&filter[id][]=235523

Steps to reproduce:
Using jsonapiClient,

• Create a component to list "Config Parameters" (for example)
• Create a component to list "Transactions" that contain a reference to a parameter record (for example). Make sure to have multiples transaction records.
  When you see the URL is being created to GET PARAMETERS records, as you have more than one reference, the 'filter' params seems to be wrong.

Related code:

• Preferably, a CodeSandbox forked from https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple
• A link to a GitHub repo with the minimal codebase to reproduce the issue

const dataProvider = jsonapiClient('http://localhost:4500', fetchJson, settings);

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="parameters" list={ParameterList} show={ParameterShow} create={ParameterCreate} edit={ParameterEdit} />
    <Resource name="invoices" list={InvoiceList} show={InvoiceShow} create={BonusPersonInvoiceCreate} />
    <Resource name="employees" list={EmployeeList} show={EmployeeShow} />
    <Resource name="bonperinv" list={BonusPersonInvoiceList} show={BonusPersonInvoiceShow} create={BonusPersonInvoiceCreate} />
    <Resource name="calculations" list={CalculationList} />
    <Resource name="calculations_bills" list={CalculationBillsList} />
    <Resource name="calculations_bonus" list={CalculationBonusList} />
    <Resource name="calculations_bonus_employee" list={CalculationBonusEmployeeList} />
  </Admin>
);
-----------
export const CalculationBonusEmployeeList = props => (
    <List {...props} title="Bonus Employee list">
        <Datagrid rowClick="show">
            <TextField source="id" label="ID" />
            <ReferenceField source="invoice_id" label="Invoice" reference="invoices">
                <TextField source="invoice_number" />
            </ReferenceField>
            <ReferenceField source="parameter_id" label="Bonus" reference="parameters">
                <TextField source="code" />
            </ReferenceField>
            <ReferenceField source="employee_id" label="Person" reference="employees">
                <TextField source="last_name" />
            </ReferenceField>
        </Datagrid>
    </List>
);

Other information:

Environment

• React-admin version: 3.5.2
• Last version that did not exhibit the issue (if applicable):
• React version:
• Browser: Google Chrome 83
• Stack trace (in case of a JS error):

Hi! and thanks for doing this project.

I am currently experimenting with it in API Logic Server. I am wondering how to return join fields, for example a ProductName for each OrderDetail:

curl "https://apilogicserver.pythonanywhere.com/OrderDetail/?include=Product&filter%5BOrderId%5D=10643&fields[OrderDetail]=OrderId,Quantity&fields[Product]=Id,ProductName"

Hi,

ra-jsonapi-client uses meta["total"] for pagination. Some libraries use meta["count"] for this. Is it possible to add a fallback to "count"? Or make this configurable? I can create a pull request if you wish.

Say we have a JSON API that returns a field like this one from the JSON API documentation:

{
  "type": "articles",
  "id": "1",
  "attributes": {
    "title": "Rails is Omakase"
  },
  "relationships": {
    "author": {
      "links": {
        "self": "http://example.com/articles/1/relationships/author",
        "related": "http://example.com/articles/1/author"
      },
      "data": { "type": "people", "id": "9" }
    }
  },
  "links": {
    "self": "http://example.com/articles/1"
  }
}

Then we want to use a <ReferenceField> to represent the associated author, using its ID. Or, if we had more associated data, then perhaps we might want to display the author's name instead.

How can we do that using ra-jsonapi-client?

Hi,
do you plan to implement relationships feature?